美文网首页
React H5 项目 微信授权登录 /静默登录

React H5 项目 微信授权登录 /静默登录

作者: 不不作为 | 来源:发表于2020-06-28 10:04 被阅读0次

    一:如何判断微信内或者微信外打开项目?

    navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 || typeof navigator.wxuserAgent != "undefined"
    

    微信内返回true 外返回false

    二:微信授权登录APP, 如果有账户,直接跳商城首页,如果没有账户,跳转到注册页面:

    1): 给按钮添加点击事件:

     <div className={styles.bottom}>
                               <span>第三方账户登录 <img  src={right} alt=""/></span>
                                <img onClick={()=>{this.weChatLogin()}} src={wx} />
                            </div>
    

    事件书写:

    weChatLogin = async () => {
        const url = encodeURI(`${myAPI}/`)
        window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
      }
    

    此时,点击按钮会自动跳转微信授权登录页面
    2):在生命周期函数中,截取code传给后台,后台判断此用户是否已注册本APP

       componentDidMount() {
            //const windowHeight = window.innerHeight
          if (window.location.href != "http://www.xcy.ac.cn/" && navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 || typeof navigator.wxuserAgent != "undefined") {
            if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
              || typeof navigator.wxuserAgent != "undefined"
            ) {
              var o1 = window.location.href.split("=")
              var o2 = o1[1] ? o1[1].split("&") : ""
              store.set('code',o2[0])
              console.log(store.get('code'))
              const code = store.get('code')
              if(code){
                users.wechatLogin({code:code}).then(res=>{  //把截取的code 传给后台,后台查询此微信有没有注册本app,如果有返回账号密码,自动登录,如果没有跳转注册页面
                  if(res.code===3){
                    console.log(res.data.tel)
                    console.log(res.data.pwd)
                    const phone  = res.data.tel;
                    const pwd = res.data.pwd;
                    users.login({phone,pwd}).then(res=>{
                      if(res.code===1){ //有:直接跳转商城首页
                        login(phone, pwd)   //调用之后把账号和密码存储再本
                        Toast.success(res.msg, 1, () => {
                          dispatch(routerRedux.push('/home'))
                        });  //成功或者失败之后的提示语
                        return;
                      }
                    })
                  }else if(res.code===4){ //没有:跳转注册页面
                   store.set('user_info',res.data)
                   history.push('/WxZhuCe')
                    //把信息返给我 然后我要去跳微信注册页面,重新注册账号密码;
                  }else if(res.code===2){
                    Toast.offline(res.msg,1)
                    return;
                  }
                })
              }
            }
          }
        }
    

    跳转注册页之后 给后台传值,然后注册成功后携带后台传的的账号密码生成token 进而登录成功

    相关文章

      网友评论

          本文标题:React H5 项目 微信授权登录 /静默登录

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