网站应用微信第三方扫码登录

朱雀 2022-10-06 09:56 252阅读 0赞

# 网站应用微信第三方扫码登录 #

为了让用户登录网站更方便，微信扫码登录变得越来越广泛。  
在开始之前首先要有开放平台的账号，没有账号需要用邮箱注册，但在小程序或公众号注册过的邮箱就不可再开放平台注册了。其次需要企业认证才能注册。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center]

##### 微信开放平台 #####

主要面对移动应用/网站应用开发者，为其提供微信登录、分享、支付等相关权限和服务。

[官方文档链接][Link 1]

##### 准备工作 #####

网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]

首先需要创建网站应用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]

按照要求填写信息，等待审核通过就可以查看Appid和AppSecret。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]

最后在该页面往下找到授权回调域，修改成要回调的域名（例如：www.baidu.com 不需要加http://或https://）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]

准备工作就做完了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]

##### 编码 #####

接下来把二维码嵌套到自己网站，只需要修改前台代码，在html中产能创建一个div容器用来放二维码。

然后要导入微信登录的js。  
[wxLogin.js下载链接：][wxLogin.js]  
提取码：szsr  
![在这里插入图片描述][20210612192448146.jpg_pic_center]

JS代码：

$(document).ready(function()
    { 
    	new WxLogin({ 
    		id:"wechat_container",//二维码容器的ID
    		appid: "appid",//网站应用的appid
    		scope: "snsapi_login",//写死
    		redirect_uri: "https://www.baidu.com ",//回调地址
    		state: "",
    		style: "black",//二维码样式
    		href: ""//css文件
    	});
    });

打开该页面就会自动加载微信登录的二维码。扫码后手机会弹出登录授权，同意后即可跳转至回调地址，回调地址中含有code参数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 6]

最后通过AppID、AppSecret、Code获取用户信息即可。获取地址如下，最后会返回一个json格式的值。

"https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + AppID + "&secret=" + AppSecret + "&code=" + Code + "&grant_type=authorization_code"

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/377cc5ba9d8d466da39eacdf0fbebec6.png
[Link 1]: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/6833c46fd7104fb39eafa4ca80c36fa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/a46cd771b3434cb2bed8b0d6d4531ede.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/6f919cba0fb0401aa4514d077cc65445.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/28fd05bc7cb64905be6f9928c45667e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/0ee3d81fb97a478f893eceb9b9a45c44.png
[wxLogin.js]: https://pan.baidu.com/s/1wWIUk7xbDgM1OTAoSW4pcg
[20210612192448146.jpg_pic_center]: /images/20221005/ef489cc047cc4ab488ec0e23e912d07c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0NzU5OQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/9b75d2f1c8d144bba518751859b845cf.png