美文网首页
uniapp小程序授权登录

uniapp小程序授权登录

作者: Amanda妍 | 来源:发表于2022-07-12 15:45 被阅读0次

    首先第一步(html部分):

    <template>
      <view class="authorizing-page">
        <view class="msg-box">
          <p class="title">申请获得以下权限</p>
          <p class="info">获得你的公开信息(昵称、头像等)</p>
        </view>
        <button v-if="canIUse" class="btn" open-type="getUserInfo" @click="bindGetUserInfo">授权登录</button>
        <view v-else class="txt">请升级微信版本</view>
      </view>
    </template>
    
    

    第二步:

     data() {
          return {
            canIUse: wx.canIUse('button.open-type.getUserInfo'),
            codeErrorNum: 0,
            code: '',
          }
        },
    onLoad() {
          uni.login({
            success: (res) => {
              this.code = res.code
            }
          })
        },
    
     // 取出code,iv,encryptedData
          bindGetUserInfo() {
    
            uni.getUserProfile({
              desc: '用于完善资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
              success: (res1) => {
                // console.log(res,123)
                if (!res1.encryptedData || !res1.iv) return false;
                this.getOpenIdAndSessionKey({
                  appid: 'wxa3ab0b1d7acd86fd',
                  code: this.code,
                  callback: (res2) => {
                    if (res2.data) this.transmitData(
                      res2.data.openid,
                      res1.iv,
                      res1.encryptedData,
                      res2.data.session_key,
                      'wxa3ab0b1d7acd86fd',
                    )
                  }
                })
              },
              fail:(res)=>{
                uni.showToast({
                  icon:"none",
                  title:'用户拒绝获取'
                })
              }
            })
    
          }
          ,
          // 传递code,iv,encryptedData
          transmitData(openid, iv, encryptedData, sessionKey, appid) {
            this.login({
              openid,
              iv,
              encryptedData,
              sessionKey,
              appid,
              callback: res => {
                console.log(res, '哈哈哈哈')
                // code不可用,重新获取code
                if (!res.success) {
                  if (this.codeErrorNum < 3) {
                    // 重新获取code
                    uni.login({
                      success: res => {
                        this.transmitData(res.code, e.target.iv, e.target.encryptedData)
                      }
                    })
                    // code无效次数加一
                    this.codeErrorNum++
                  } else {
                    this.$tools.showModal(res.message, false)
                  }
                  return
                }
                this.$tools['metadata'] = Object.assign(this.$tools['metadata'], res.data.metadata)
                // this.initSocket(res.data.id)
                uni.navigateBack({delta: 1})
              }
            })
          }
          ,
    

    相关文章

      网友评论

          本文标题:uniapp小程序授权登录

          本文链接:https://www.haomeiwen.com/subject/rxdabrtx.html