uni-app第三方登陸-微信

uni-app第三方登陸-微信

結合上文全域性登陸校驗，實現微信授權登入
官方手冊地址： https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo

一 、寫兩個介面

login.vue 用於使用者登陸
my.vue 我的介面，存放校驗登陸的函式

1.1 my.vue

<script>
    var loginRes;
    export default {
        onLoad:function(){
            loginRes = this.checkLogin('../my/my', '2');
            if(!loginRes){
                return;
            }
        }
    }
</script>

1. 2 login.vue

<script>
    var _self;
    export default {
        data() {
            return {
                backpage:'',
                backtype:''
            };
        },
        onLoad:function(options){
            _self = this;
            // #ifdef APP-PLUS
                uni.login({
                    success: (res) => {
                        // console.log(JSON.stringify(res))
                        // 第三方登陸
                        // res 物件格式
                        //{"code":"***",
                        //"authResult":{
                            //"openid":"***",
                            //"scope":"snsapi_userinfo",
                            //"refresh_token":"**",
                            //"code":"****",
                            //"unionid":"***",
                            //"access_token":"***",
                            //"expires_in":7200
                        //},
                        //"errMsg":"login:ok"}

                         uni.getUserInfo({
                            success: (info) => {
                                // console.log(JSON.stringify(info))
                                // info 物件格式
                                // {"errMsg":"getUserInfo:ok",
                                // "rawData":"...
                                // "userInfo":{
                                    //"openId":"***",
                                    //"nickName":"***",
                                    //"gender":1,
                                    // "city":"Xi'an",
                                    // "province":"Shaanxi",
                                    // "country":"China",
                                    // "avatarUrl":"頭像",
                                    // "unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"
                                //},"signature":""}
                                // 與伺服器互動將資料提交到服務端資料庫
                                uni.request({
                                    url: _self.apiServer+'member&m=login',
                                    method: 'POST',
                                    header: {'content-type' : "application/x-www-form-urlencoded"},
                                    data: {
                                         openid: info.userInfo.openId,
                                         name: info.userInfo.nickName,
                                         face: info.userInfo.avatarUrl,
                                    },
                                    success: res => {
                                        console.log(JSON.stringify(res))
                                        res = res.data;
                                        if(res.status == 'ok'){
                                            uni.showToast({
                                                title: '登陸成功',
                                                mask: false,
                                                duration: 1500
                                            });
                                            uni.setStorageSync('SUID' , res.data.u_id + '');
                                            uni.setStorageSync('SRAND', res.data.u_random + '');
                                            uni.setStorageSync('SNAME', res.data.u_name + '');
                                            uni.setStorageSync('SFACE', res.data.u_face + '');

                                            // 判斷跳轉方式
                                            if(options.backtype == '1'){
                                                uni.redirectTo({url:options.backpage});
                                            }else{
                                                uni.switchTab({url:options.backpage});
                                            }
                                        }else{

                                            uni.showToast({title:res.data});
                                        }
                                    },
                                    fail: () => {
                                        console.log('登陸失敗')
                                    },
                                    complete: () => {}
                                });

                            },
                            fail: () => {
                                uni.showToast({title:"微信登入授權失敗"});
                            }
                        })
                    },
                    fail: () => {
                        uni.showToast({title:"微信登入授權失敗"});
                    }
                })
            // #endif
            console.log(options)
        }
    }
</script>

主要涉及到2個方法：

• uni.login
• uni.getUserInfo

uni.login

用於觸發第三方登陸，調起微信登陸，登陸成功後返回物件格式如下：

{    
    "code":"***",
    "authResult":{
        "openid":"***",
        "scope":"snsapi_userinfo",
        "refresh_token":"**",
        "code":"****",
        "unionid":"***",
        "access_token":"***",
        "expires_in":7200
    },
    "errMsg":"login:ok"
}

uni.getUserInfo

獲取使用者資訊，通過上方的 uni.login 方法會得到使用者 access_token，故 uni.getUserInfo 在此基礎上獲取使用者的 openid、userInfo(頭像、暱稱) 等資訊。

{
    "errMsg":"getUserInfo:ok",
    "rawData":"...
    "userInfo":{
        "openId":"***",
        "nickName":"***",
        "gender":1,
        "city":"Xi'an",
        "province":"Shaanxi",
        "country":"China",
        "avatarUrl":"頭像",
        "unionId":"oU5xxxxxxxxxxeLfFPqxo"
    },
    "signature":""
}

uni.request

此方法為 uni-app 中用於網路請求。詳細見官方手冊：https://uniapp.dcloud.io/api/request/request?id=request

二、效果

點選 my.vue 將會觸發 微信登陸授權介面，如下：

登陸成功後，向遠端伺服器傳送一個儲存使用者資訊的請求