微信公众号网页授权登录实现起来如此简单

举报
国服第二切图仔 发表于 2022/07/05 15:44:51 2022/07/05
【摘要】 ​ 前言这篇文章带大家掌握 从0到1实现微信公众平台授权登录微信公众号授权登录到底哪几步回调地址,安全域名怎么配置代码怎么写出了问题怎么办一、微信公众号授权登录到底哪几步官方文档介绍微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.h...

 前言


这篇文章带大家掌握 从0到1实现微信公众平台授权登录

  • 微信公众号授权登录到底哪几步
  • 回调地址,安全域名怎么配置
  • 代码怎么写
  • 出了问题怎么办

一、微信公众号授权登录到底哪几步

官方文档介绍微信开放文档微信开发者平台文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

       

编辑

 文档看似很复杂,实际上前端只需要两步:

1、去访问微信提供的一个url地址
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

或者https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

两种的区别是:scope为snsapi_base和scope为snsapi_userinfo,区别就是是否弹出用户授权

应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过 openid 拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

这个地址需要你配置的地方有:appid(微信公众号id)redirect_uri(回调地址)

2、访问这个地址后,微信会回跳你设置的redirect_uri地址,并且带回来一个code,

把这个code传给后台,后台去访问微信的接口,获取用户的openid和access_token,

到这里也用实现了微信的授权登录。

二、回调地址,安全域名怎么配置


  1.  1、在申请到认证公众号之前,你可以先通过测试号申请系统,快速申请一个接口测试号,立即开始接口测试开发(测试号申请地址)

微信开放文档微信开发者平台文档 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html

redirect_uri的配置

只需要配置回调域名 (请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;)。

(1)打开微信公众号测试号(方便开发调式),修改js安全域名,也可以设置192的地址

编辑

(2)找到体验接口权限表-网页账户-修改

编辑


(3)设置回调域名编辑


 (4)微信公众号正式号设置

编辑

 编辑


三、代码怎么写

代码如下(示例):


<template>
  <div class="login"></div>
</template>
<script>
import { login } from "@/api/login.js";
import indexConfig from "@/config/index.config";
export default {
  data() {
    return {};
  },
  created() {
    this.isWXBrowser = this.isWXBrowser();
    if (this.isWXBrowser) {
      let code = this.getUrlCode("code");
      if (code) {
        this.wxLogin(code); //后台登录
      } else {
        this.getWeChatCode(); //微信授权
      }
    }
  },
  onload() {},
  mounted() {},
  methods: {
    //判断是否是微信内置的浏览器
    isWXBrowser() {
      return (
        String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
        "micromessenger"
      );
    },
    //截取地址栏code
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },
    //访问微信地址,用来获取code
    getWeChatCode() {
      let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
      let appid = indexConfig.weixinAppId;
      //通过微信官方接口获取code之后,会重新刷新设置的回调地址【redirect_uri】
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
        appid +
        "&redirect_uri=" +
        local +
        "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
    },
    //把code传递给后台接口,静默登录
    wxLogin(code) {
      login(code).then((res) => {
        if (res.success) {
          uni.setStorageSync("token", res.data.session.token);
          uni.setStorageSync("userid", res.data.session.userid);
          uni.navigateTo.push({
            route: "/pages/works/index",
          });
        } else {
          uni.showToast({
            title: res.msg,
            duration: 3000,
            icon: "none",
          });
          return;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

 四、出现问题怎么办

在开发出现问题时,可以通过接口调用的返回码,以及报警排查指引(在公众平台官网 - 开发者中心处可以设置接口报警),来发现和解决问题


最后


原创不易,还希望各位大佬支持一下 
👍 点赞,你的认可是我创作的动力! 
⭐️收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。