uni-app---第三方登录

使用uniapp开发app，难免涉及到第三方账号登录

使用uni.loginAPI实现第三方登录

• 参考官方文档

两个界面

• login.vue 登录界面
• my.vue 我的界面，存放校验登录的函数

my.vue 页面

• 如果登录过，不跳转，直接return
• 如果没有登录过，就跳转到login.vue 并携带两个参数（登录成功之后的跳转界面，跳转方式）

<script>
    var loginRes;
    export default {
        onLoad:function(){
            loginRes = this.checkLogin('../my/my', '2');
            if(!loginRes){
                return;
            }
        }
    }
</script>

login.vue 页面

• 用到了三个方法
• uni.login() 登录方法
• uni.getUserInfo() 获取用的信息方法
• uni.request() 请求数据的方法

<script>
// 自己的后台登录接口地址
var _self;
export default {
	data() {
		return {
			backpage:'',
			backtype:''
		};
	},
	onLoad:function(options){
		_self = this;
		/* #ifdef APP-PLUS */
			uni.login({
				success: (res) => {
					/* console.log(JSON.stringify(res))
					第三方登陆
					res 对象格式
					{"code":"***",
					"authResult":{
						"openid":"***",
						"scope":"snsapi_userinfo",
						"refresh_token":"**",
						"code":"****",
						"unionid":"***",
						"access_token":"***",
						"expires_in":7200
					},
					"errMsg":"login:ok"} */

					 uni.getUserInfo({
						success: (info) => {
							/* console.log(JSON.stringify(info))
							info 对象格式
							{"errMsg":"getUserInfo:ok",
							"rawData":"...
							"userInfo":{
								"openId":"***",
								"nickName":"***",
								"gender":1,
								"city":"Xi'an",
								"province":"Shaanxi",
								"country":"China",
								"avatarUrl":"头像",
								"unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"
							},"signature":""} */
							/* 与服务器交互将数据提交到服务端数据库 */
							uni.request({
								url: _self.apiServer+'member&m=login',
								method: 'POST',
								header: {'content-type' : "application/x-www-form-urlencoded"},
								data: {
									 openid: info.userInfo.openId,
									 name: info.userInfo.nickName,
									 face: info.userInfo.avatarUrl,
								},
								success: res => {
									console.log(JSON.stringify(res))
									res = res.data;
									if(res.status == 'ok'){
										uni.showToast({
											title: '登陆成功',
											mask: false,
											duration: 1500
										});
										uni.setStorageSync('SUID' , res.data.u_id + '');
										uni.setStorageSync('SRAND', res.data.u_random + '');
										uni.setStorageSync('SNAME', res.data.u_name + '');
										uni.setStorageSync('SFACE', res.data.u_face + '');

										/* 判断跳转方式 */
										if(options.backtype == '1'){
											uni.redirectTo({url:options.backpage});
										}else{
											uni.switchTab({url:options.backpage});
										}
									}else{

										uni.showToast({title:res.data});
									}
								},
								fail: () => {
									console.log('登陆失败')
								},
								complete: () => {}
							});

						},
						fail: () => {
							uni.showToast({title:"微信登录授权失败"});
						}
					})
				},
				fail: () => {
					uni.showToast({title:"微信登录授权失败"});
				}
			})
		/* #endif */
		console.log(options)
	}
}
</script>

解释

uni.login

• 用于触发第三方登录，掉漆微信登录，登录成功之后返回对象格式如下

{    
    "code":"***",
    "authResult":{
        "openid":"***",
        "scope":"snsapi_userinfo",
        "refresh_token":"**",
        "code":"****",
        "unionid":"***",
        "access_token":"***",
        "expires_in":7200
    },
    "errMsg":"login:ok"
}

uni.getUserInfo

• 获取用户信息，通过上方的uni.login 方法会得到用户assess_token,古
• uni.getUserInfo在此基础上获取的用户信息openid，userInfo(头像，昵称)等信息

{
    "errMsg":"getUserInfo:ok",
    "rawData":"..."
    "userInfo":{
        "openId":"***",
        "nickName":"***",
        "gender":1,
        "city":"Xi'an",
        "province":"Shaanxi",
        "country":"China",
        "avatarUrl":"头像",
        "unionId":"oU5xxxxxxxxxxeLfFPqxo"
    },
    "signature":""
}

uni.request

• 次方法uni-app中用于网络请求，详情见官方手册：uni.request