介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运


uni-app微信公众号H5开发中微信授权登录与获取用户信息的实现

微信授权

微信授权有2种方式:静默授权非静默授权

静默授权:scope=snsapi_base。没有弹窗,只能获取到用户的openid。

非静默授权:scope=snsapi_userinfo。有弹窗,需要用户手动点击同意授权,可获取到用户的openid、昵称、头像、性别。

授权流程

1. 页面一加载,判断有没有code(因为授权成功之后,会刷新当前页面,此时应该在页面一加载的时候判断有没有code,如果有code,直接把code传给后台服务器)

onLoad(e) {
    let code = this.getUrlCode('code')
    console.log(code)
    if(code !== null || code !== "") {
        this.getOpenidAndUserinfo(code)
    }
},

2. 引导用户进入授权页面同意授权,获取code

// 获取code
    // 先判断url中有没有code,如果有code,表明已经授权,如果没有code,跳转微信授权链接
    getCode () {
        if(isWechat()) {
            // 截取地址中的code,如果没有code就去微信授权,如果已经获取到code了就直接把code传给后台获取openId
            let code = this.getUrlCode('code')
            if (code === null || code === '') {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri=' + encodeURIComponent('http://127.0.0.1/pages/views/profile/login/login') + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                // redirect_uri是授权成功后,跳转的url地址,微信会帮我们跳转到该链接,并且通过?的形式拼接code,这里需要用encodeURIComponent对链接进行处理。
                // 如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会再地址栏中看到code了。
                // http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
            }
        }
    },
    
    getUrlCode (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
    },
    
    const isWechat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
    }

参数说明

参数是否必须说明
appid公众号的唯一标识
redirect_url授权后重定向的回调链接地址,需要使用 encodeURIComponent对链接进行处理
response_type返回类型,请填写code
scope授权方式,如果为snsapi_base(不弹出授权页面,直接跳转,只能获取用户的openid),如果为snsapi_userinfo(弹出授权页面,需要用户手动点击同意授权,可获取到用户的openid、昵称、头像、性别)
state重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect无论直接打开还是做页面302重定向的时候,必须带此参数

关于网页授权回调域名的说明

如何修改授权回调域名?—— 进入公众号平台官网的“开发 – 接口权限 – 网页服务 – 网页授权获取用户基本信息 – 修改”

3. 通过接口把code传给后台服务器

getOpenidAndUserinfo(code) {
    uni.request({
        url: 'http://127.0.0.1/api/wxLogin?code='+code+'&state=state&appid='+appid,
        success: (res) => {
            console.log('通过code获取openid和accessToken', res)
            if(res.data.code === 200) {
                // 登录成功,可以将用户信息和token保存到缓存中
                uni.setStorageSync('userInfo', res.data.result.userInfo)
                uni.setStorageSync('token', res.data.result.token)
            }
        }
    })

4. 前端拿到后台返回的数据

返回的数据格式如下:

{
    code: 200
    message: "登录成功"
    result: {
        token: "54f663ca-45d4-4758-97a7-f727b942c09a"
        userInfo: {
            avatar: "http://thirdwx.qlogo.cn/mmopen/vi_32/MXuWgYbeVv5icyS4XBz28vpdh4iaRJAP3WYQ2uHMBUFcjvcHwykZ5wYPJG4CibJGAMv73n813vypau7Rs4iaA1uiaIw/132",
            nickName: "Allen",
            sex: 2,
            openid: "oPSEKwuzvwfZ5NEHhn9FBMJrNXpM",
            unionid: "o_ra9t3byZL5dMG1M-p2xOBFRAyc",
        }
    }
}

参数说明

参数描述
avatar用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
nickName用户昵称
sex用户性别。值为1时是女性,值为2时是男性,值为0时是未知
openid用户的唯一标识
unionid只有在用户将公众号绑定到微信开放平台账号后,才会出现该字段

关于unionid机制

1、请注意,网页授权获取用户基本信息也遵循UnionID机制。即如果开发者有在多个公众号,或在公众号、移动应用之间统一用户帐号的需求,需要前往微信开放平台(open.weixin.qq.com)绑定公众号后,才可利用UnionID机制来满足上述需求。

阅读全文
公众号-介尘阅读时光
赞赏支持

0 Responses to “uni-app微信公众号H5开发中微信授权登录与获取用户信息的实现”

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)