APP第三方登录功能实现（uniapp）

今天药忘吃喽~ 2022-12-31 06:18 470阅读 0赞

# APP第三方登录功能实现（uniapp） #

## 1.用户操作流程(例:微信登录) ##

![1609151839638-9cf8194eaf0c71f1.png][] ![1609151838919-0efacaaf8f87901b.png][] ![1609151839058-27c3ccce1ee1f9b4.png][]

## 2.参考uniapp官方文档 ##

这是一个链接 [uniappAPI文档][uniappAPI]

*  获取服务供应商
 *  点击登录
 *  检查登录用户是否注册
 *  获取用户信息

##### 2.1 获取服务供应商 #####

在App平台，可用的服务商，是打包环境中配置的服务商，与手机端是否安装了该服务商的App没有关系。

云打包在manifest中配置相关模块和SDK信息，离线打包在原生工程中配置。某个服务商配置被打包进去，运行时就能得到相应的服务供应商。  
`代码示例`

uni.getProvider({
    service: 'oauth',
    success: function (res) {
        console.log(res.provider)
        if (~res.provider.indexOf('qq')) {
            uni.login({
                provider: 'qq',
                success: function (loginRes) {
                    console.log(JSON.stringify(loginRes));
                }
            });
        }
    }

\});

##### 2.2 点击登录 #####

各个平台的登录流程存在差异，详细请参考相关平台的文档说明  
[微信小程序登录][Link 1]  
[支付宝小程序用户授权][Link 2]  
[百度小程序登录][Link 3]  
[字节跳动小程序登录][Link 4]  
[Apple登录、苹果登录、Sign in with Apple][Apple_Sign in with Apple]  
[一键登陆][Link 5]

`代码示例`

uni.login({ 
    provider: 'weixin',
    success: function (loginRes) {
    console.log(loginRes.authResult);
    }
    });

##### 2.3 检查登录用户是否注册 #####

第2步返回的loginRes.authResult中的openid很关键，请求接口去auth表中去查是否有这个openid的用户注册过，有就返回对应的user信息，没有走第4步，获取用户信息

##### 2.4 获取用户信息 #####

`代码示例`

uni.getUserInfo({
    					provider: provider.id,
    					success: info => {
    						if (info.userInfo) {
    							const nickname = info.userInfo.nickname;
    							const avatar = info.userInfo.figureurl_qq_2;
    							const data = JSON.stringify(info.userInfo);
    							const clientId = plus.push.getClientInfo().clientid;
    							const red = uni.getSystemInfoSync();
    							const clientinfo = {
    								clientId,
    								platform: 'APP',
    								os: red.platform,
    								PhoneModel: red.model
    							};
    							//注册用户的接口
    							this.authRegister('authRegister', provider.id, openid, nickname, avatar, data, clientinfo);
    							//返回用户信息登录成功
    						}
    					}
    				});

## 3.总结 ##

> ios必须有苹果登录（踩坑）

> 项目代码：yizhi/yizhi/components/other-login/other-login.vue有兴趣去看看

> 下一期：APP第三方分享，敬请期待！

[1609151839638-9cf8194eaf0c71f1.png]: https://worthdaily-app.oss-cn-hangzhou.aliyuncs.com/files/1609151839638-9cf8194eaf0c71f1.png
[1609151838919-0efacaaf8f87901b.png]: https://worthdaily-app.oss-cn-hangzhou.aliyuncs.com/files/1609151838919-0efacaaf8f87901b.png
[1609151839058-27c3ccce1ee1f9b4.png]: /images/20221120/d3fc6348939d4eeea1e51e9313b5d1e7.png
[uniappAPI]: https://uniapp.dcloud.io/api/README
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[Link 2]: https://opendocs.alipay.com/mini/introduce/authcode
[Link 3]: https://smartprogram.baidu.com/docs/develop/api/open/log_swan-login/
[Link 4]: https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/api/open-interface/log-in/tt-login
[Apple_Sign in with Apple]: https://ask.dcloud.net.cn/article/36651
[Link 5]: https://uniapp.dcloud.io/univerify