uni-app 第三方授权登录

深圳水贝珠宝 發表於 2021-5-16 21:00:00

注意:在使用uni-app第三方登录时采用的是手机真机调试
授权登录html
<div class="cnblogs_code">
<pre><view type="primary" class="login_type" v-for="(value,key) in providerList" @click="tologin(value)"
 :key="key">
 <view class="login_type_name">{{value.name}}</view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre><script>
import {
 mapState,
 mapMutations
} from 'vuex'

export default {
 data() {
 return {
 title: 'login',
 providerList: [],
 openid:''

 }
 },
 computed: {
 ...mapState(['hasLogin'])
 },
 onLoad() {
 uni.getProvider({
 service: 'oauth',//服务类型
 success: (result) => {
 this.providerList = result.provider.map((value) => {
 let providerName = '';
 switch (value) {
 case 'weixin':
 providerName = '微信'
 break;
 case 'qq':
 providerName = 'QQ'
 break;
 case 'sinaweibo':
 providerName = '微博'
 break;
 }
 return {
 name: providerName,
 id: value
 }
 });

 },
 fail: (error) => {
 console.log('获取登录通道失败', error);
 }
 });
 },
 methods: {
 ...mapMutations(['login']),
 tologin(provider) {
 uni.login({
 provider: provider.id,
 // #ifdef MP-ALIPAY
 scopes: 'auth_user', //支付宝小程序需设置授权类型
 // #endif
 success: (res) => {
 console.log('login success:', res);
 this.openid=res.authResult.openid;
 uni.setStorageSync('openid', res.authResult.openid);
 // 更新保存在 store 中的登录状态
 this.login(provider.id); 　　　　　　　　　　　　　　　　//根据openid获取当前授权的信息
 uni.getUserInfo({
 provider: this.loginProvider,
 success: (result) => {
 console.log(result);
 var _this=this;
 // // 将第三方信息添加入库
 this.$api.baseRequest("partyRegister", "POST", {
 patient_name: result.userInfo.nickName,
 openid: _this.openid,
 figure_url: result.userInfo.avatarUrl
 }).then(res => {
 　　　　　　　　　　返回值
 });

 },
 fail: (error) => {
 // console.log('getUserInfo fail', error);
 uni.navigateTo({
 url: "../login/login"
 })
 }
 });

 // // #ifdef MP-WEIXIN
 // console.warn('如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id');
 // #endif
 },
 fail: (err) => {
 console.log('login fail:', err);
 }
 });
 },
 formSubmit: function(e) {
 var phone_number = e.detail.value.phone_number;
 var password = e.detail.value.password;
 if (phone_number.length == '') {
 uni.showToast({
 title: '手机号必填',
 icon: 'none'
 })
 return false;
 }
 // 验证手机格式未完成
 if (phone_number.length != 11) {
 uni.showToast({
 title: '手机号格式有误',
 icon: 'none'
 })
 return false;
 }
 if (password.length == '') {
 uni.showToast({
 title: '密码必填',
 icon: 'none'
 })
 return false;
 }
 
 },

 }
}
</script>
<style>
@import "./login.css";
</style></pre>
<img src="https://img2020.cnblogs.com/blog/2330586/202105/2330586-20210516205844835-52265715.png">
 
 
</div>
 
获取授权信息
<div class="cnblogs_code">
<pre>// uni.getUserInfo({
 // provider: this.loginProvider,
 // success: (result) => {
 // console.log(result)
 // // 用户名称
 // this.patient=result.userInfo.nickName;
 // this.openid=result.userInfo.openId;
 // // 用户头像
 // this.info.image=result.userInfo.avatarUrl;
 // this.hasUserInfo = true;
 // this.userInfo = result.userInfo;
 // }
 // });</pre>
</div>
  
来源：https://www.cnblogs.com/jerry-min/p/14774832.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 第三方授权登录