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

然后就可以通过获取到的信息，请求后端接口进行注册或者登录。

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

推荐阅读

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