uni-app 第三方授权登录

Posted 2021-05-16 jerry_min

注意:在使用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;        
            //     }
            // });