首先在 manifest.json -> App模块权限配置,勾选 OAuth(登陆鉴权),勾选自己想要的第三方登录,然后点击蓝色的链接去开放平台注册开通
最后输入appid等参数即可。
具体代码如下:
<template> <view class="flex align-center px-5 py-3"> <view class="flex-1 flex align-center justify-center" v-for="(item, index) in providerList" :key="index"> <view :class="item.icon + ' ' + item.bgColor" class="iconfont font-lg text-white flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;" @click="thirdPartyLogin(index)" ></view> </view> </view> </template> <script> export default { data() { return { providerList: [] }; }, mounted() { uni.getProvider({ service: 'oauth', success: result => { this.providerList = result.provider.map(value => { let providerName = ''; let icon = ''; let bgColor = ''; switch (value) { case 'weixin': providerName = '微信登录'; icon = 'icon-weixin'; bgColor = 'bg-success'; break; case 'qq': providerName = 'QQ登录'; icon = 'icon-QQ'; bgColor = 'bg-primary'; break; case 'sinaweibo': providerName = '新浪微博登录'; icon = 'icon-xinlangweibo'; bgColor = 'bg-warning'; break; } return { name: providerName, id: value, icon: icon, bgColor: bgColor }; }); }, fail: error => { console.log('获取登录通道失败!', error); return false; } }); }, methods: { //第三方登录 thirdPartyLogin(index) { if (index === '' || index === undefined || index === 'undefined') { uni.showToast({ title: '参数错误,请联系管理员!', icon: 'none', duration: 3000 }); return false; } else { let loginType = ''; // 1 判断用户的登录类型 if (index == 0) { loginType = 'weixin'; } else if (index == 1) { loginType = 'qq'; } else if (index == 2) { loginType = 'sinaweibo'; } // 2 授权登录,弹出授权窗口 uni.login({ provider: loginType, success: res => { var access_token = ''; access_token = res.authResult.access_token; // 3 授权登录成功以后,获取用户的信息 uni.getUserInfo({ provider: loginType, success: function(infoRes) { let formdata = {}; if (index == 0) { formdata = { nickName: infoRes.userInfo.nickName, gender: infoRes.userInfo.gender, headImgUrl: infoRes.userInfo.avatarUrl, openId: infoRes.userInfo.openId, unionId: infoRes.userInfo.unionId, access_token: access_token, appLoginType: 'WEIXIN' }; } else if (index == 1) { formdata = { nickName: infoRes.userInfo.nickname, gender: infoRes.userInfo.gender == '男' ? 1 : 2, headImgUrl: infoRes.userInfo.figureurl_qq_2, openId: infoRes.userInfo.openId, unionId: '', access_token: access_token, appLoginType: 'QQ' }; } else if (index == 2) { formdata = { nickName: infoRes.userInfo.nickname, gender: infoRes.userInfo.gender == 'm' ? 1 : 2, headImgUrl: infoRes.userInfo.avatar_large, openId: infoRes.userInfo.id, unionId: '', access_token: access_token, appLoginType: 'SINAWEIBO' }; } // 4 调用开发者后台,执行一键注册或登录 uni.request({ url: '后端api接口', method: 'POST', data: formdata, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: res => { if (res.data.code != 200) { uni.showToast({ title: res.data.err, duration: 3000, icon: 'none' }); return false; } else { //登录成功处理 uni.showToast({ title: res.data.message, duration: 3000, icon: 'none' }); let ticket = res.data.ticket; // 5 保存用户信息到全局的缓存中 uni.setStorageSync('ticket', ticket); // 6 切换页面跳转,使用tab切换的api uni.switchTab({ url: '../my/my' }); return true; } } }); } }); }, fail: err => { uni.showToast({ title: '请求出错啦!', icon: 'none', duration: 3000 }); } }); } } } }; </script> <style></style>
网友回复