小程序授权登录

@小程序授权登录

小程序授权登录

微信

微信官方开发文档链接

注意：如果使用微信提供API获取用户信息 若授权时点击取消就不能被调用（只能调用一次）

解决办法：通过微信提供的组件来实现微信的授权登录 组件-表单组件-button

• 组件-button

		<button
			 open-type="getUserInfo"
			 bindgetuserinfo="processLogin"
			>授权获取用户信息
		</button>

processLogin: function(e){
    console.log('userInfo',e);
 },

一般需要获取openid存入到数据库

• API-wx.login(Object object)
  

流程获取code-通过code获取openid

• 通过微信API接口wx.login获取code

示例代码

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

• 通过auth.code2Session获取openid

请求地址

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

请求参数

返回值

此处微信获取用户信息到此结束。。。

字节

字节官方开发文档链接

同样字节小程序的字节授权和微信一样，都是只能调用一次授权接口，除非清除缓存
流程：获取用户授权设置-判断是否开启用户授权-若无授权打开设置页面-获取用户信息

示例代码

//获取用户授权设置
tt.getSetting({
      success(res) {
        console.log('调用成功',res);
        //判断用户是否打开用户授权设置
        if(res.authSetting['scope.userInfo']){
          tt.getUserInfo({
            success(res) {
              console.log('getUserInfo 调用成功',res.userInfo);
                var userInfo = res.userInfo;
                tt.setStorageSync('userInfo',userInfo);
                tt.setStorageSync('nick_name',userInfo.nickName);
                tt.setStorageSync('avatar_url',userInfo.avatarUrl);
                tt.setStorageSync('gender',userInfo.gender);
                that.getIsUser();
            },
            fail(res) {
              console.log(`getUserInfo 调用失败`);
            },
          });
        }else{
       		//若无打开授权设置通过tt.openSetting接口 打开设置手动打开用户授权
            tt.openSetting({
              success(res) {
              console.log("openSetting",res)
              tt.getUserInfo({
            success(res) {
              console.log('getUserInfo 调用成功',res.userInfo);
                var userInfo = res.userInfo;
                tt.setStorageSync('userInfo',userInfo);
                tt.setStorageSync('nick_name',userInfo.nickName);
                tt.setStorageSync('avatar_url',userInfo.avatarUrl);
                tt.setStorageSync('gender',userInfo.gender);
                that.getIsUser();
            },
            fail(res) {
              console.log(`getUserInfo 调用失败`);
            },
          });
            },
          });
          tt.showToast({
            title: '请打开用户信息按钮',
            icon: 'none',
            duration: 4000
          });
        }
      }
    });
  },

• 获取用户openid-调用tt.login

 login: function(){
    tt.login({
      success(res) {
        console.log('login调用成功',res.code);
        var code = res.code;
        //获取用户openid
        tt.request({
          url: ``, // 目标服务器url
          method: 'GET',
          dataType:'json',
          header: {
            'content-type': 'application/json'
          },
          success: (res) => {
            console.log('成功获取openid',JSON.parse(res.data.message).openid)
            tt.setStorageSync('openid',JSON.parse(res.data.message).openid);
          },
          fail(res) {
            console.log('获取openid失败');
          }
        })
      },
      fail(res) {
        console.log(`login调用失败`);
      },
    });
  },

• 调用接口
  
  请求地址

GET https://developer.toutiao.com/api/apps/jscode2session

请求参数

返回值

此处字节获取用户信息到此结束。。。