uniapp--第三方登錄 小程序登錄

小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識，快速建立小程序內的用戶體系。

在manifest.json文件里：

1、微信小程序配置：添加微信小程序的 appID

2、App模塊權限配置：勾選上 OAuth登錄鑒權 選項

3、App SDK配置：登錄鑒權-微信登錄-添加appid 和 appsecret

打開app.vue文件，創建一個全局的方法：

// 是否登錄
global.isLogin = function(){
    try {
        var suid = uni.getStorageSync('suid'); // 用戶ID
        var srand = uni.getStorageSync('srand'); // 隨機碼
    }catch(e) {
            
    }
    if (suid == '' || srand == '') {
        return false;
    }else{
        return [suid, srand];
    }
};

然后在首頁index.vue中判斷：

onLoad(e) {
    var res = global.isLogin();
    if (!res) {
        uni.showModal({
            title: '提醒',
            content: '請登錄',
            success() {
                uni.navigateTo({
                    url:'../login/login'
                })
            }
        })
    }
},

新建login頁：

<template>
    <view>
    login...
    <!-- #ifdef MP-WEIXIN -->
    <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo"
            withCredentials="true">微信登錄</button>
    <!-- #endif -->
    </view>
</template>

<script>
export default {
  methods: {
    getuserinfo(e) {
        if (!e.detail.iv) {
        uni.showToast({
            title: '您取消了授權，登錄失敗',
            icon: 'none'
        });
        return false;
        }
        console.log(e);
    }
  }
}
</script>

此時可以獲取到userInfo的信息，包括昵稱城市等。

接着繼續uni.login：

uni.login({
    provider: 'weixin', // 提供商
    success: function (res) {
      console.log(res);
    　if (res.code) {
        //發起網絡請求
        uni.request({
        url: 'url地址',
        data: {
            code: res.code
        },
        success:function (res3) {
            console.log(res3);
            // 此時可以得到openid  session_key  unionid            
        }
        })
      } else {
        console.log('登錄失敗！' + res.errMsg)
      }
    }
});

然后就可以通過獲取到的信息進行注冊及登錄了。

當然認證時還可以攜帶用戶手機號：

button 里添加 open-type="getPhoneNumber" 

<button class="login-button white" open-type="getPhoneNumber" 
 @getphonenumber="getPhoneNumber">獲取手機號</button>

方法：

// 獲取手機號
getPhoneNumber(e) {
    if (!e.detail.iv) {
    uni.showToast({
        title: '您取消了授權，登錄失敗',
        icon: 'none'
    });
    return false;
    }
    console.log(e);
    uni.login({
    provider: 'weixin', // 提供商
    success: function (res) {
      console.log(res);
      if (res.code) {
        //發起網絡請求
        uni.request({
          url: 'url接口',
          data: {
            code: res.code
          },
          success:function (res3) {
            console.log(res3);
            // 此時可以得到openid  session_key  unionid
            uni.request({
                url: 'url接口',
                data: {
                'encryptedData': e.detail.encryptedData,
                'iv': e.detail.iv,
                'sessionKey': res3.data.data.session_key,
                'openid': res3.data.data.openid,
                'unionid': res3.data.data.unionid,
                },
                method: 'POST',
                header: {'content-type': 'application/x-www-form-urlencoded'}, 
                success:function (res4) {
                console.log(res4);
                // 此時返回手機號
                },
            })
          },
       })
     }
   },
  })
}

同樣可以通過手機號進行注冊或者登錄。

app端使用微信登錄：

<!-- #ifdef APP-PLUS -->
<button type="primary" @click="getAppWxlogin" withCredentials="true"></button>
<!-- #endif -->

方法：

// #ifdef APP-PLUS
// app WX登錄
getAppWxlogin() {
  // 獲取服務商
  uni.getProvider({
    service: 'oauth',
    success: function (res) {
      console.log(res.provider)
        if (~res.provider.indexOf('weixin')) {
        uni.login({
          provider: 'weixin',
          success: function (res) {
            console.log(JSON.stringify(res));
            // 可以獲取到code、openid、unionid、
          }
        });
      }
    }
  });
}
// #endif

然后通過 uni.getProvider 獲取服務供應商。

在通過 uni.getUserInfo 去獲取用戶的信息：

// #ifdef APP-PLUS
// app WX登錄
getAppWxlogin() {
  // 獲取服務商
  uni.getProvider({
    service: 'oauth',
    success: function (res) {
      console.log(res.provider)
        if (~res.provider.indexOf('weixin')) {
        uni.login({
          provider: 'weixin',
          success: function (res) {
            console.log(JSON.stringify(res));
            // 此時可以獲取到code、openid、unionid、
            // 獲取用戶信息                                
            uni.getUserInfo({
              provider: 'weixin',
        　　   success: function (infoRes) {
                console.log(JSON.stringify(infoRes));
            　　 console.log('用戶昵稱為：' + infoRes.userInfo.nickName);
              }
            });
          }
        });
      }
    }
  });
}

然后就可以通過獲取到的信息，請求后端接口進行注冊或者登錄。