uni-app 第三方授权登录

深圳水贝珠宝

注意:在使用uni-app第三方登录时采用的是手机真机调试

授权登录html

<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>

<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>

 

 

 

获取授权信息

// 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;        
            //     }
            // });

 

来源：https://www.cnblogs.com/jerry-min/p/14774832.html