手机端访问第三方java服务器后判断是否进行OAuth2.0网页微信公众号授权认证

在网上看了好多案例关于网页授权认证,但不是自己想要的,所以尝试写了一篇,怎么在服务器端引导授权认证!不足之处请指出共同学习。

一、关于什么是OAuth2.0网页授权认证网上资料很多,也可以去官网查看,官网地址:点击打开链接

         另外网页认证默认支持80,443端口,回调函数不能带端口,回调函数值在测试公众号可以为ip或域名,生产只能为域名。之前看到帖子说测试环境下可以带端口,但我还没测试过。

二、现在先介绍微信公众平台OAuth2.0授权流程

微信公众平台OAuth2.0授权详细步骤如下:

1. 用户关注微信公众账号。
2. 微信公众账号引导用户请求授权页面URL。(本文章主要针对怎么在服务端进行引导用户进行网页授权)
3. 用户点击授权页面URL,将向服务器发起请求
4. 服务器询问用户是否同意授权给微信公众账号(scope为snsapi_base时无此步骤)
5. 用户同意(scope为snsapi_base时无此步骤)
6. 服务器将CODE通过回调传给微信公众账号
7. 微信公众账号获得CODE
8. 微信公众账号通过CODE向服务器请求Access Token
9. 服务器返回Access Token和OpenID给微信公众账号
10. 微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi_base时无此步骤)
11. 服务器将用户信息回送给微信公众账号(scope为snsapi_base时无此步骤)

如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称、性别、城市、国家)。利用用户信息,可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。 请注意,“获取用户基本信息接口是在用户和公众号产生消息交互时,才能根据用户OpenID获取用户基本信息,而网页授权的方式获取用户基本信息,则无需消息交互,只是用户进入到公众号的网页,就可弹出请求用户授权的界面,用户授权后,就可获得其基本信息(此过程甚至不需要用户已经关注公众号。)”

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

在微信公众号请求用户网页授权之前,开发者需要先到公众平台网站的我的服务页中配置授权回调域名。

请注意,这里填写的域名不要加http://
关于配置授权回调域名的说明:
授权回调域名配置规范为全域名,比如需要网页授权的域名为: www.qq.com,
配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。

但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com  无法进行OAuth2.0鉴权。

三  没有账号。怎么测试呢,使用测试账号

这里讲一下在没有服务的情况,可以使用测试账号,进入开发者工具,找到测试账号。进入网页授权接口,修改里面的回调函数使用ngrok外网映射工具生成的域名,如图是产生的 临时域名,使用红圈圈起来的就可以了。


把这里的域名配置一下就可以了。就可以进行验证测试。
四 使用测试工具
测试工具在网上下载到本地, 进入cmd,进入工具所在这一级目录路径,然后执行  ngrok http  8080  等一会就可以看到上图所示。 高版本执行这句才可以,低版本可以不用加http
注意这条命令只可以在cmd不关闭突出下才可以,否则无效。而且每次执行命令产生的域名都不一样。所以每次测比较麻烦。但有一种可以设置执行一次就可以。但该条命令
最近一直用不了。看了帖子,大家都一样,所以这里就不给出了,感兴趣可以百度一下,资料比较多,很容易找到。
到这里测试环境就OK了,其他就是代码了。

下面借鉴别人一个流程图(个人感觉不错)来自:点击打开链接

大体授权流程介绍到此;就本文章而言,开始进行服务器端网页授权认证操作:
1.用户登录微信公众号,访问服务器
2.服务器进行判断引导用户进入授权页面同意授权,获取code
3.通过code换取网页授权access_token(与基础支持中的access_token不同)
4.如果需要,开发者可以刷新网页授权access_token,避免过期
5.通过网页授权access_token和openid获取用户基本信息
附:其中包括  6.
ssl认证(证书认证和网络安全信息加密)

第一步:

让用户关注微信公众号,给用户提供一个按钮,用于访问服务器;

第二步:

用户访问服务器后进行用户判断,是否已网页授权认证,如果没有则引导用户进行授权认证
使用重定向方式引导用户进行网页授权认证。(OAuth2.0规定网页授权只支持在手机端进行认证);

最后进入网页授权页面 :进行用户同意授权,获取code

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的 snsapi_base snsapi_userinfo );
这一步在整个的网页授权过程中是非常重要的一步,因为只有引导用户授权获取到code才能开始后面信息的获取,在这里需要注意的是我们在配置授权链接中的redirect_uri必须是我们在第一步中配置的安全域名。
这一步其实就是将需要授权的页面 url拼接到微信的认证请求接口里面 ,比如需要用户在访问页面  lovebread.tunnel.qydev.com/auth  时进行授权认证,那么拼接后的授权验证地址为:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx88888888&redirect_uri=http://lovebread.tunnel.qydev.com/auth&response_type=code&scope=snsapi_base&state=xxxx_state#wechat_redirect

 这里面需要替换appid、redirect_uri为实际的信息。其中的scope参数有两个值:

    snsapi_base:只能获取到用户openid。好处是静默认证,无需用户手动点击认证按钮,感觉上像是直接进入网站一样。

    snsapi_userinfo:可以获取到openid、昵称、头像、所在地等信息。需要用户手动点击认证按钮。


参数是否必须说明
appid公众号的唯一标识
redirect_uri授权后重定向的回调链接地址,请使用urlencode对链接进行处理
response_type返回类型,请填写code
scope应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息
state
否 

重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
#wechat_redirect无论直接打开还是做页面302重定向时候,必须带此参数 


























注:code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期!

未完,后续补加源码。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
提供的源码资源涵盖了Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试,可以直接运行,可以放心下载使用。有任何使用问题欢迎随时与博主沟通,第一时间进行解答!
在Vue项目中使用微信OAuth2.0授权登录,可以通过以下步骤实现: 1. 在微信公众平台或开放平台中申请应用,并获取到appID和appSecret。 2. 在Vue项目中安装wechat-oauth模块,该模块提供了微信OAuth2.0的相关接口。 ``` npm install wechat-oauth ``` 3. 在Vue项目的后端服务器中,编写一个处理微信OAuth2.0授权登录的回调接口,并在该接口中调用wechat-oauth模块提供的接口,实现用户授权登录。 ``` const OAuth = require('wechat-oauth'); const client = new OAuth(appId, appSecret); // 获取授权地址并重定向到该地址 router.get('/wechat/login', async (ctx, next) => { const redirectUrl = client.getAuthorizeURL( 'http://your-redirect-url', '', 'snsapi_userinfo' ); ctx.redirect(redirectUrl); }); // 处理授权回调 router.get('/wechat/callback', async (ctx, next) => { const code = ctx.query.code; const token = await client.getAccessToken(code); const openid = token.data.openid; const userInfo = await client.getUser(openid); // TODO: 处理用户信息 }); ``` 4. 在Vue项目中,提供一个“使用微信登录”的按钮,点击该按钮时,重定向到后端服务器中的授权接口,实现用户授权登录。 ``` <template> <div> <button @click="loginWithWechat">使用微信登录</button> </div> </template> <script> export default { methods: { loginWithWechat() { window.location.href = 'http://your-server/wechat/login'; } } } </script> ``` 需要注意的是,使用微信OAuth2.0授权登录,需要用户在微信客户端中进行操作,因此需要在移动端或微信公众号中使用。同时,需要在微信公众平台或开放平台中配置授权回调地址,并保证该地址可以被访问到。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

平凡之路无尽路

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值