106.公众号开发-微信授权登录（1）原创

各位同学大家好，刚才呢，内容中咱们完成了两部分，第一部分是公众号的普通消息，第二部分是公众号的模板消息，我们进行测试都现出来了，那下面呢，咱来实现公众号里边的第三部分，那就是公众号的授权操作，这个授权操作呢，我觉得各位同学在日常生活中应该都见过，比如我们现在啊关注了某个公众号，然后咱们在手机上需要点同意，同意之后才能实现里面的这些内容，包括同意的时候它会有一个提示，说可以获取到你微信的信息等内容，所以这个叫授权。而咱们在我们的这个项目中也要做到微信公众号的授权，因为后面的很多功能需要得到你的微信信息。各位应该记得啊，咱们刚才呢，做这个模板消息的时候，里边有段代码，不说各位是否记得，咱们看一下啊，直接就看一下我们的课件里边。

我们找到在代码中呢，有这么一个地方，大家看这行代码，这个得到的是什么呢？就是你当前微信的是不是它那个ID，或者叫open ID，而每个人的微信ID肯定都不一样，所以咱们授权可以得到微信的open ID，很多功能都需要用到这个值，包括咱们这个模板消息就需要用到，我当时测试是写了固定的，而各位肯定找不到这个固定值，所以咱们下面讲到这个值怎么得到，这个过程需要通过微信授权获取到，所以下面咱们开始做这个微信授权功能，那这功能先看下它的流程，给各位说一下啊，这流程怎么样呢？就是我们通过菜单进入页面都要进行授权操作，也就是这个意思啊，大家看这里边我是不是有直播。是不是有课程，当我点里边这些菜单，然后他都需要进行授权之后才能进入，这是我们要做的事情，就是你进入里边直播或者点播里边内容中都需要做这个微信授权，授权过程中我们主要得到微信的信息，里边有一个重要的值，那就是你微信那个open ID很多地方都要用到，所以这是咱们一个需求说明，然后这个说完之后，下面呢，咱们看一下这个到底该怎么去用，我们说这过程啊，首先这过程在微信官方有一个详细的文档，在文档中做了一个完整说明，那怎么做，我强调啊，首先里边的第一部分。

咱们需要在微信公众号中配置一下你这个授权的一个域名，这个需要配置，那怎么配置，给大家演示一下，首先大家看啊，这是我们的微信公众号，这个正式号，在正式号里边，你点击公众号测试，然后点击功能测试，在下面这个位置叫网页授权域名。把你的域名加进去，咱们刚才做的是内网穿透，就这个网关的8333，这是不是咱的域名，所以把这域名在里边做个配置，我这位置已经配置过了，然后域名配置中特别说明啊，咱们前面不要加上HTP冒号杠杠，就加上后面部分，这是正式号中，但是现在我们用测试号进行实现，那我们看一下测试号中怎么做。

咱们找到啊，在里边的这个位置。这是配置，你那个就是公众号显示页面部分，加上咱的域名，而现在做授权不是在这里啊，是在下边，你看这个位置啊，一个叫体验接口权限表在下面，咱们找到往下来找啊，找到它那个授权部分。我们看到啊，授权部分应该是在这个位置啊，咱们找到啊，在这里你看啊，网页账号，网页授权获取用户基本信息，我们点修改，把你的域名加进来，就是我们那个内网穿透域名，我这里边已经加过了，这是他的第一部分，咱们需要做个配置。

给各位啊，在图上我来画一下啊，就这里边。给大家写下啊。首先里边的。第一步，咱们在公众号测试号里边配置你授权的这个域名，咱们用的是内网穿透的域名，而在这里边咱就点这个修改做个配置可以了，这是里边的第一步，我这里边已经做到了，然后这个域名咱用内网穿透访问咱们本地接口，就访问到本地的8333接口，也就是这个地方。咱们看啊，就这里。这位置。它里边做一个操作，呃，这已经过期了啊，重新登录一下。这个重新登录进去啊，咱们看一下。然后登录，呃，重新刷新一下啊，然后各位看里边隧道管理中，咱们点编辑，它到的是8333这个洞号，所以现在啊，这个我们得力配置，这是里边的第一步，然后这个配置之后，咱们下面呢来做它的具体实现，咱们先看一下官方是怎么做的，他告诉我们里边有一个基本步骤，也就是里边的这个12345这么一个基本步骤，那怎么做呢？首先第一步咱们用户同意授权获取一个值叫code code的是什么呢？它叫临时票据，就类似于咱们说那个手机验证码，然后咱们拿着code去得到一个值叫ton。

这个名字咱之前见过啊，就是咱说那个访问凭证，这是里边的第二步，然后这个得到之后，我们的第三步拿着，然后最终得到用户信息啊，当然过程中你可以刷新，如果不刷新，那我们就直接拿这个值，最终得到你的用户信息，包括你的open ID，包括他的其他值。

这是里边一个基本步骤，而这个步骤在微信里边，它有相关的工具类给我们都做了封装，咱后面直接实现用到，还是之前的一个微信MP service可以做到，这是一个基本步骤，那下面呢，咱们进一步往下做一下啊，咱看下面做什么，刚才我提到啊，咱们访问公众号菜单里边的内容都需要授权，你看啊，这里边是不是有很多内容，这内容呢，咱们会有一套页面。我之前提到了，咱们公众号中是用H5的页面进行显示，这个页面呢，我这里边已经开发好了，咱们不需要各位写了，咱把页面直接部署用就可以了，里边就是一些H5页面加上一些这在什么，咱们重点关注接口部分，那咱们下面啊，把公众号里面那个H5的前端页面咱们做一个部署。这个页面呢，我是用voe直接生成的一个项目，咱们直接用就可以了，那咱们部署一下啊，看怎么做，第一个在资料里边呢，我有这么一个就是项目叫voe mobile，然后这个项目呢，你直接复制到你的工作区中可以了，我这位置已经复制过了，就这个vouee mobile，然后咱把它用终端打开，打开之后我们进行启动，因为这里边呢，没有用什么框架，就是vouee的股价直接生成的这么一个项目，那我们启动，记住它的启动命令啊，跟之前不太一样。

Serve，然后咱们回就可以，我这个为这个项目起来是咱们做到的，我这里边都写到了啊，你把这个不制到工作区中，然后用命令npm ru s行启动，启动之后它用的默认端口号是8080，大家看是不是进行启动了，然后这个启动之后，后面咱们访问，因为用到那个内网穿透域名访问，你看我内网穿透中的。

这个部分。我们看一下啊，就是这个。第一个你看第一个用的是8080，所以咱用它进行操作，而这个域名叫硅谷课堂二，我在这个公众号里边也做了一个配置，就这个地方叫JS接口的安全域名，后面咱们要访问到咱们H5页面，用它进行实现。这各位注意啊，另外呢，在这套项目中就是一些页面，在项目中呢，咱看个文件JS里边用的也是AX，然后它会调用咱们本地的接口，本地接口我通过域名方式进行调用。内网穿透会到咱们833端口号，这前端不需要改，咱直接部署就可以了，所以现在啊这部分我们就做到了，那我在这里边给大家写一下啊，第一步咱们完成了域名这个配置。然后第二步咱们部署咱们公众号那个H5的。

前端的项目，然后使用命令进行启动就可以了，这是第二部分，刚才我们已经做到了。然后做到之后呢，下面我们继续往下实现，在这个页面中呢，代码已经写好了，咱们看它一个处理啊，看这代码，然后怎么看呢，跟之前项目很类似，我们找到SC里边有一个叫啊，就是咱们每次访问里边的内容都先经过这个页面，然后在这页面中，我这位置做了一个处理，大家看里边的这个代码。你看啊，Collect在页面渲染前执行，然后直行的时候里边做了一个判断，大家看这判断怎么做的啊，首先我们取到我们通过接口传回来一个token token列为就是一个字符串，里面会带咱们的用户信息，如果token值不等于空，那咱把这值放到这个叫local s里面去。

然后后面再做其他判断，最终完成跳转，就是比如说你现在啊，你访问里边这个某个直播课程，他先进行授权，当授权完成之后，然后再进行跳转，它里面是第个过程。然后在过程中呢，用到一个叫local，这是什么意思呢？我这里也写到了啊，它是H5中呢，加入了一个新特性，用于本地存储，跟cookie一样都能存储，因为cookie存储空间很小，只有几K，而local所它的空间比较大一点，会有几兆大小，所以现在我用这个进行我们的存储。这个啊是咱们看到前端，然后前端呢，最后大家看这位置啊，当你这里边比如说我们做了这个就是售前之后，最终要进行这个跳转，然后跳转的话，这里边啊，有这么一个地方给大家说一下啊，这什么意思？给各位说明啊，比如说大家看啊，我现在呢，访问我们的前端的这个项目啊，给各位写一下啊，比如我们前端项目这个路径，我们叫这个我就简写了啊，Local house，咱是8080，什么是路径后面加上页面，而页面部分呢，它的过程就是需要加个井号，比如后面啊，我加上一个什么这个u info，或者加上一个什么这个live课程加上你的课程号，这里边都需要有个井号，然后跳转到你的页面中去，这是VE中路由的特点，但是这个井号在传递过程中，它不能进行传递，所以我这里边做了一个转换。

大家看我的写法，把路径中的井号变成这个叫硅谷课堂，后面咱在接口中再给它转换回来，为了防止这里边井号不能传递，所以里边做这个处理，然后最终咱们授权调用咱们本地这个接口，一会儿咱们写这个接口，当你授权通过之后，再完成这个跳转，跳转到这个页面中去啊，里边井号是因为路径中包含井号，井号不能直接传递，传递会有问题，把井号咱做个替换，后面给他再替换回来。

所以以上就是前端部分，这各位直接附制可以了，然后这个完成之后，下面呢，咱就开始写这个授权这个接口啊，第一次这个local里边肯定没有值，所以咱们会到接口中做授权，就是得到你的ID，然后加到数据库中，最终再进行音频跳转，所以下面啊，咱们开始显示接口。以上是我们提到的授权的一个需求，包括前端的一个说明，前端各位把这个项目直接部署上，已经写好这个代码，咱们重点都放到咱们的接口部分，那下面呢，咱就开始完成授权接口的实现。