您现在的位置是：首页 > 技术教程 正文

前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细，包会

admin 阅读： 2024-03-29
后台-插件-广告管理-内容页头部广告（手机）

一、准备工作

本人申明：本案例使用到的appid和AppSecret都是无效的

appid：应用唯一标识，在微信开放平台提交应用审核通过后获得
AppSecret：在微信开放平台提交应用审核通过后获得

二、引入地址(有两种引入方式)

1.在根目录html文件引入，既index.html

2.通过js添加节点

  1. const script = document.createElement('script')
  2. script.type = 'text/javascript'
  3. script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  4. document.body.appendChild(script)

三、在需要使用微信登录的地方实例以下 JS 对象

  1. var obj = new WxLogin({
  2. self_redirect: false,    //默认为false(保留当前二维码) true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)
  3. id: "login_container", //容器的id
  4. appid: "wxa3fdea5a3090f", //应用唯一标识，在微信开放平台提交应用审核通过后获得
  5. scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
  6. redirect_uri: "https://www.xiang.com//client/index.html",    //扫完码授权成功跳转到的路径
  7. // state: "",    //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
  8. style: "white", //提供"black"、"white"可选，默认为黑色文字描述
  9. href: "data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg==" //自定义样式链接，第三方可根据实际需求覆盖默认样式
  10. });

注意事项：

  1. 如果二维码出来，但是跳转失败，一定要看看浏览器是否开启了拦截。

  1. href 必须是样式链接/base64格式，转码地址(css文件转码)：https://www.lddgo.net/convert/filebasesix

  1. redirect_uri 重定向的地址必须是白名单地址

这里附上我自己的css文件地址(效果参考页尾)：

data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg==
  1. .loginPanel.normalPanel .title {
  2. display: none;
  3. }
  4. .qrcode.lightBorder {
  5. width: 174px;
  6. height: 174px;
  7. margin-top: 0;
  8. box-sizing: border-box;
  9. }
  10. .impowerBox .info {
  11. display: none;
  12. }
  13. .web_qrcode_type_iframe {
  14. width: 174px;
  15. }

四、获取 code

授权成功以后当前code会拼接在重定向地址后面列：

https://www.xiang.com//client/index.html?code=021NoBFa1u5ORE0600Ja1dDubb2NoBFT&state=undefined

通过两种方法获取：

  1. window获取

window.location.search.substring(6).split('&')[0]

  1. 路由监听获取

  1. watch: {
  2. $route(){
  3. if(this.$route.query.code!=undefined){
  4. console.log(this.$route.query.code,this.$route.query.state);
  5. }
  6. }
  7. },

五、通过 code 获取access_token

注：这一步可以给后端操作，把获取到的code通过调用接口给予后端，后端拿到数据以后，返回登录状态跟字段，前端也可以获取到所有的状态以后再返回给后端(但是这样没有必要，因为还是要给后端，后端需要筛选字段返回给我们)

  1. https://api.weixin.qq.com/sns/oauth2/access_token?
  2. appid=APPID    应用唯一标识，在微信开放平台提交应用审核通过后获得
  3. &secret=SECRET    应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
  4. &code=CODE    填写第四步获取的 code 参数
  5. &grant_type=authorization_code    填authorization_code
  1. axios({
  2. 'url': `https://api.xaing.qq.com/sns/oauth2/access_token?appid=wxa3fdea55b5a3090f&secret=089ba1c53233913f94c0381aa53c1d8e&code=CODE&grant_type=authorization_code`,
  3. 'method': 'get'
  4. })

正确返回：

  1. {
  2.     "access_token":"ACCESS_TOKEN",     //接口调用凭证
  3.     "expires_in":7200,     //access_token接口调用凭证超时时间，单位（秒）
  4.     "refresh_token":"REFRESH_TOKEN",    //用户刷新access_token
  5.     "openid":"OPENID",     //授权用户唯一标识
  6.     "scope":"SCOPE",    //用户授权的作用域，使用逗号（,）分隔
  7.     "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"   //当且仅当该网站应用已获得该用户的 userinfo 授权时，才会出现该字段。
  8. }

最后附上案例：

  1. html>
  2. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Documenttitle>
  9. head>
  11. <body>
  12. <div id="login_container">div>
  13. body>
  15. <script src="https://downs.yaoulive.com/liveJs/axios.min.js">script>
  16. <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js">script>
  17. <script>
  18. var obj = new WxLogin({
  19. self_redirect: false,
  20. id: "login_container",
  21. appid: "wxa3fdea5a3090f",
  22. scope: "snsapi_login",
  23. redirect_uri: "https://www.xiang.com//client/index.html",
  24. // state: "",
  25. style: "white",
  26. href: "data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg=="
  27. });
  29. // 这一步可以直接调用接口返回给后端code，由后端来进行这一步
  30. if (window.location.search.substring(6).split('&')[0]) {
  31. axios({
  32. 'url': `https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxa3fdea5a3090f&secret=53233913f94c0381aa53c1d8e&code=${window.location.search.substring(6).split('&')[0]}&grant_type=authorization_code`,
  33. 'method': 'get'
  34. })
  35. }
  38. script>
  40. html>

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表