FastAPI 实现网页授权获取微信用户基本信息-测试环境


一、怎么实现微信扫码登录?

该模式整体流程为:

  1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
  2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;
  3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。

获取access_token时序图:
在这里插入图片描述

二、准备工作

  1. 公众号测试账号
    无需申请公众帐号、可在测试帐号中体验并测试微信公众平台所有高级接口。
    https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
    在这里插入图片描述

  2. 获取测试号信息 appID 和 appsecret
    在这里插入图片描述

  3. 测试号二维码 微信扫描关注测试公众号
    在这里插入图片描述

  4. 修改网页授权获取用户基本信息
    在这里插入图片描述
    127.0.0.1:8000

  5. 在需要登录的平台上开发一个微信回调的接口
    可以接收 code state 参数
    http://127.0.0.1:8000//auth/login/wx/?code=001xKs000xsgkL1OD1100uy2lP3xKs0q&state=111
    需要与网页授权获取用户基本信息中的IP端口一致

三、使用步骤

第一步:用户同意授权,获取code

获取code有二种方式,在网站应用微信登录开发指南中有详细描述。

  1. 第一种是需要跳转到微信域下,显示二维码供用户扫码登录,用户授权成功后带code跳转回平台链接
    在这里插入图片描述
  2. 第二种在平台内使用js内嵌微信登录二维码,用户授权成功后带code跳转回平台链接,可以根据平台需要修改二维码样式
    在这里插入图片描述
  3. 本次文章使用的由链接直接获取code并回调至平台

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明:
1. SCOPE 参数是应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
2. REDIRECT_URI参数是重定向地址,需要进行UrlEncode

生成的用于获取code的链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=http%3a%2f%2f127.0.0.1%3a8000%2f%2fauth%2flogin%2fwx%2f&response_type=code&scope=snsapi_base&state=111#wechat_redirect

也可以是用这个链接自己生成一个二维码,方便手机测试
在这里插入图片描述

第二步:通过code换取网页授权access_token

代码如下:

@router.get(
    "/login/wx/",
    tags=["微信登录"],
    responses=ResponsesExampleVale(
        {
            "code":  200,
            "message": "登录成功!",
            "content": {}
        }
    )
)
async def login_wx(
        request: Request,
        code: str,  # 返回类型,请填写code"
        state: str,  # 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
):
    # 通过code换取网页授权access_token
    logger.info(f"code: {code}, state: {state}")
    data = await WXAPI.userinfo(code)
    if data:
        return HttpResponseModel(
            code=200,
            message="获取成功",
            content=data
        )

第三步:拉取用户信息(需scope为 snsapi_userinfo)

代码如下:

# conding=gbk
from app.utils.soa import RequestSessionManager
from aiohttp import ClientResponseError
from extensions.logger import logger
import json


class WXAPI:
    appID = "appID"
    appsecret = "appsecret"

    @classmethod
    async def __request(cls, url):
        with RequestSessionManager() as requests:
            async with requests.get(url=url, timeout=10) as resp:
                try:
                    resp.raise_for_status()
                    data = json.loads(await resp.text())
                    logger.info(f"ret {data}")
                    return data
                except ClientResponseError as e:
                    logger.info(e)

    @classmethod
    async def access_token(cls, code):
        """ 通过code换取网页授权access_token """
        url = f"https://api.weixin.qq.com/sns/oauth2/access_token" \
              f"?appid={cls.appID}" \
              f"&secret={cls.appsecret}" \
              f"&code={code}" \
              f"&grant_type=authorization_code"
        return await cls.__request(url)

    @classmethod
    async def userinfo(cls, code):
        """ 拉取用户信息 """
        data = await cls.access_token(code)
        if data:
            if data['scope'] == "snsapi_userinfo":
                url = f"https://api.weixin.qq.com/sns/userinfo" \
                      f"?access_token={data['access_token']}" \
                      f"&openid={data['openid']}" \
                      f"&lang=zh_CN"
                return await cls.__request(url)
            else:
                return {"appid": data['openid']}

第四步:测试

用户点击链接并授权
在这里插入图片描述
回调接口获取的用户信息
在这里插入图片描述
后台日志
在这里插入图片描述

简单实现了微信网页授权获取用户基本信息功能

  • 48
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 61
    评论
微信H5网页授权是指在使用微信浏览器访问H5网页时通过微信授权登录获取用户基本信息。这个过程分为三个步骤:引导用户授权获取授权码、通过授权获取用户信息。 首先,用户进入H5网页后,网页需要引导用户进行授权登录网页可以通过调用微信JS-SDK中的微信授权接口,弹出微信授权登录的窗口。用户点击确认后,微信会生成一个授权码,并跳转回H5网页。 然后,网页需要使用授权码去微信服务器获取用户基本信息网页可以通过HTTP请求,将授权码发送给微信服务器的接口,并附上AppID和AppSecret等参数。微信服务器验证授权码的有效性后,会返回用户基本信息,如openid、昵称、头像等。 最后,网页可以根据获取用户基本信息,进行相应的业务操作。比如显示用户的头像和昵称,或者根据openid等唯一标识,将用户与其它业务系统进行关联。 需要注意的是,进行微信H5网页授权需要先申请微信开放平台的开发者账号,并创建一个公众号或移动应用。通过在微信开放平台进行配置,获取AppID和AppSecret等必要的参数,用于网页授权的流程中。 总结起来,微信H5网页授权获取用户基本信息是通过使用微信授权接口,引导用户进行授权登录,再通过授权码和微信服务器进行交互,最终获取用户基本信息。这个过程可以实现在H5网页上使用微信账号登录,并获取用户信息的功能。
评论 61
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不太灵光的程序员

有用的话可以请博主喝杯咖啡续命

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值