uni-app 第三方授权登录

使用uniapp开发跨平台app, 难免会涉及第三方账号授权登录

uni-app官方文档

本文主要使用uni.login API实现第三方登录, H5上的授权登录, uniapp未封装

平台差异说明

页面代码

<view class="auth"><!-- #ifdef APP-PLUS -->// 条件编译, 代码只有在app内才生效<image src="../../static/icos/weixin.png" data-loginType="weixin" @click="auth"></image><image src="../../static/icos/QQ.png" data-loginType="qq" @click="auth"></image><image src="../../static/icos/weibo.png" data-loginType="sinaweibo" @click="auth"></image><!-- #endif --><!-- #ifndef MP-WEIXIN -->// 条件编译, 代码只有在微信小程序内才生效<image src="../../static/icos/weixin.png"  @click="weixinLogin"></image><!-- #endif -->
</view>
复制代码

在methods内处理点击事件

methods: {auth(e) {let loginType = e.currentTarget.dataset.logintype// 获得定义在image标签上的logintype属性, 属性取值只能使用小写// 授权登录uni.login({provider: loginType,// 给provider传入不同的值, 调用不同的应用登陆接口success(res) {// 登录成功后, 获取用户数据uni.getUserInfo({provider: loginType,success(e) {console.log(JSON.stringify(e.userInfo));//  返回的数据是json格式}})}}
复制代码

provider 在不同服务类型下可能的取值说明文档

微信,qq,微博三大平台返回的字段不同, 需要进行处理

auth(e) {let loginType = e.currentTarget.dataset.logintypeuni.login({provider: loginType,success(res) {// 登录成功后, 获取用户数据uni.getUserInfo({provider: loginType,success(info) {var userInfo = info.userInfovar nickName = ""var avatarUrl = ""var openId = ""if (loginType == "weixin") {nickName = userInfo.nickNameavatarUrl = userInfo.avatarUrlopenId = userInfo.openId} else if (loginType == "qq") {nickName = userInfo.nicknameavatarUrl = userInfo.figureurl_qq_2// qq返回了多个尺寸的头像, 按需选择openId = userInfo.openId}else if (loginType == "sinaweibo") {nickName = userInfo.nicknameavatarUrl = userInfo.avatar_largeopenId = userInfo.id}}})}})}

uni-app 第三方授权登录相关推荐

aspnet登录界面代码_SPA+.NET Core3.1 GitHub第三方授权登录
GitHub第三方授权登录有许多文章都讲过GitHub第三方授权登录,但就是没有.NET Core配合前后端分离的项目(Vue,React)的实践.所以本文以前后端分离项目中如何在授权登录后,生成T ...
android 微博 4.1sdk,android使用新浪微博最新SDK4.1进行第三方授权登录
android使用新浪微博最新SDK进行第三方授权登录工具:android-studio 新浪SDK版本:4.1 1Demo参考下载官方SDK:https://github.com/sinawei ...
【Android应用开发详解】第01期：第三方授权认证（一）实现第三方授权登录、分享以及获取用户资料
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9057257 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字 ...
对第三方社会化 sdk 的集成和二次封装，比如第三方授权登录、第三方分享等
SocialSDKAndroid 项目地址:tsy12321/SocialSDKAndroid 简介:对第三方社会化 sdk 的集成和二次封装,比如第三方授权登录.第三方分享等对第三方社会化 sdk ...
以微博为例进行Oauth2进行第三方授权登录
OAuth2.0:对于用户相关的 OpenAPI(例如获取用户信息,动态同步,照片,日志,分享等),为了保护用户数据的安全和隐私,第三方网站访问用户数据前都需要显式的向用户征求授权. 流程: (A)用 ...
微信第三方授权登录之oauth开发
背景: 首先copy下别人讲解的oauth2.0验证授权的一些背景知识: 1) 传统的注册登陆方式: 如果你是一个新用户,则点击新用户注册按钮,进入由简书提供的注册页面,进行用户名密码验证和设置然后 ...
android 随手记第三方授权登录，获取资料，分享
帖子原文URL: http://blog.csdn.net/yangyu20121224/article/details/9057257 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文 ...
OAUTH之钉钉第三方授权登录
文章目录 OAUTH之钉钉第三方授权登录前期用到的工具获取access_token 请求地址请求方法响应扫码 / 使用账号密码 -- 获取临时 code 参数重要说明直接访问扫码登录 ...
实现 Google 第三方授权登录
最近做项目要实现Google的第三方登录,这简单的记录一下. 目前Google的第三方登录有很多方案,且官方提供SDK方便接入.但是我这个项目同时要实现网页和客户端.所以选择了 Google OAut ...

uni-app 第三方授权登录

uni-app 第三方授权登录

uni-app 第三方授权登录相关推荐

最新文章

热门文章