在web开发中,我们经常会让网站接入微信登录功能,这样用户免于注册账号,网站开发人员也可以更为方便地获取到用户信息。
微信登录可以分为两种情况,一种是网站的扫码登录,另一种是在微信浏览器中直接登录,本节我们就讲解如何在自己的网站上接入微信登录功能。
具体的开发流程官方文档已经给出了详细的说明,但是文档更关注的是严谨和全面,本节的内容更倾向于简单易懂。下面介绍一下扫码登录的开发流程。
首先我们要有一个注册并认证的微信开放平台账号(认证要300元人民币)。注册和认证成功之后,如下图所示进入【网站应用】。首次进入之后下方是空白,需要点击【创建网站应用】。然后根据提示加入自己的网站,下图为加入完成后的效果。
点击【查看】可以看到详细内容,【接口信息】需要申请,申请通过之后才可以开通。
开通之后,就可以调用开放平台的接口实现微信登录功能了。
网站微信扫码登录流程
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
至此,我们的服务器就成功获取到了微信用户的信息,然后,如果用户是第一次登陆,可以将用户信息记录在数据库中,如果非第一次登陆,则可以通过openid获取用户在自己网站的信息。
上面已经介绍了网站的扫码登录,主要针对的是PC端的用户。本节我们讲解微信内的授权登录,也就是说,如果用户使用的是微信浏览器,那么用户不用使用扫码功能,只要点击一个授权登录的按钮,就能实现微信登录了,对用户来说操作简单了很多。
在【公众号】设置中,添加自己网站的【业务域名】【JS接口安全域名】【网页授权域名】。
在微信浏览器内登录与扫码登录的唯一区别就是第一步不同,扫码登录需要用户跳转到一个微信服务器提供的有二维码的页面以便获取code参数,而微信浏览器登录,可以直接让用户访问下面的地址,便可以获取到code参数。
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=123#wechat_redirect
这里同样需要提供appid和redirect_url两个值。其余的操作,与扫码登录获取用户信息相同。
简化的微信扫码登录流程: