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