00:00
各位同学大家好,下面呢,我们继续来实现微信授权登录,咱们刚才呢,完成了内网穿透的配置,我这里边啊给大家再解释一下,咱们为什么要配置内网穿透,我在图里边给大家再来画一下啊,各位注意啊,咱们现在呢,是不是要整合这个微信公众号啊,我这里写一下啊,这个就是我们的微信这个公众号。然后公众号里边大家注意啊,在公众号中咱们是要访问一些相关的页面呀,这个页面是不是就是我们项目中这个9090这个里面,这个页面也就是我们之前看到的是不是这些页面,就咱们这个页面要在微信公众号中进行显示,那我写一下啊,就是我们9090这个项目中的这个页面,这是我们做到的啊,这各位明确,然后这个页面各位注意啊,因为你注意如果说咱们通过公众号要去访问到咱们9090这个项目中的页面,因为这个9090它是不是在咱的本地啊,你看我们本地用进行访问,但是公众号它肯定不认我们这个路径,公众号是部署到那个微信那个上,访问到我们这个本地的logo号,96906服务,那怎么做呢?这个过程中咱就用到我们之前说那个叫内网穿透。
01:23
我写一下啊。内网穿透什么叫内网穿透,说的简单讲啊,它就是一个域名服务,然后咱们在这里边公众号,它可以访问到我们这个内网穿透这个域名,这个可以访问到,因为它是一个实际的域名,只要你能联网就能访问到,就是它里边是这么做的,通过内网穿透这个域名,然后内网穿透里面做了配置,它会访问到咱们9090项目的页面,所以这个时候我们访问公众号,公众号就能到咱本地页面,但是中间经过了一个内网穿透的服务,通过域名到咱本地,说的简单点啊,通过他帮这个公众号把页面就是给他返回回来,这是我们做的就是内网穿透的第一个目的。
02:10
然后之后呢,里边还有一个目的,比如说我们现在啊,在这个微信公众号中,我们有这个相关这个页面,通过内网穿透访咱的本地,把页面都已经加载过来了,最终在里面会进行显示,比如说咱们后面的这个页面都是在公众号中显示,但是里边有个问题啊,大家注意公众号是不是要调咱们本地的接口,大家看这位置啊,要调本地。我们的接口在这里边呢,咱们之前写的是这LOCAL80问题。大家看啊,我现在这个页面是不是运行在公众号里边呀,而他访问的接口地址同样在咱的本地,我们本地的接口地址是local house808800,这个本地的接口地址,这在本地,所以这个时候怎么做,同样啊,咱们通过内网穿透就是在这个时候。
03:09
页面它也是访问到内网穿透,然后内网穿透呢,去访问到的本地的8800这个接口。最终实现尽快操作,比如说你现在做审批啊,做查询,做其他功能。所以咱们现在啊,内网穿透是这个目的,说的简单点,通过内网穿透能访问到本地的项目页面和本地的接口服务,这是我们配置它的目的啊,但是在实际的开发中,我们很少这么去做,因为这么做你发现啊,是不是有多层,肯定会造成你的效率会降低,实际中我们肯定有真正的服务,真正的域名,那在里边直接配置就可以了,咱目前为了自己测试,所以经过一个内网穿透,我们内网穿透呢,给大家介绍一个软件叫NG,但实际中有很多的内网穿透,我们这边呢,这里边建议各位啊,就是开通一个就是收费的,这个进行使用,免费的也能用,只是免费的,因为用的人比较多,他会经常掉线,我课上这里边已经开通好一个收费的啊,给大家也会听出来啊,但是我这个有一个有效期啊,我这有效期是到。
04:19
八暂啊,当然也够够各位进行使用了啊,这各位就注意它里面的用途啊,为什么要用内网穿透,主要是两个地方,第一个要返到咱们这个9090项目的页面,第二个要访问到我们8800这个接口的服务。这是咱们这么一个说明啊,然后这个之后下面呢,我们继续往下来看,咱们开始做这个微信授权登录,看这个该怎么去做,那这里边啊,同样给大家继续来画这个图,说一下它的过程是怎么样,我在这里边啊,给各位就直接画一下啊,上面是内网穿透这个使用过程,然后咱们这里边画条线啊,给大家画到下面。
05:02
咱们怎么做这个授权登录。我在里边写一下啊,比如说我们现在啊,咱们前面呢,应该已经开通了这个微信公众号,因为咱没有那种支付的高级功能,咱们用测试号就可以了,那这个时候呢,我们怎么做,我写一下啊,比如现在咱们开通了微信公众号,然后咱们关注这个公众号啊,肯定要关注,关注之后呢,在里边我们击公众号进入到它那个菜单部分,然后咱们点击菜单里面这个功能,也就是说啊,咱们看一下,就是现在我们在这个页面中点击公众号,点发消息里边是不是有菜单,咱们可以点击菜单中的某个功能,比如说我现在啊,点菜单里面这个就是待处理。已处理发送,或者说点这个审批中心,或者点这个我的里边这个基本信息等等,所以咱们现在比如说做这个事情。
06:03
这里边啊,我就画它的流程,当我们点击菜单功能的时候呢,这个时候他要做件事情,做什么事情呢?做这个叫微信的这个授权。写一下啊微信授权,什么叫微信授权呢?我觉得这个效果啊,各位同学应该是见过,比如说你现在啊,关注某个微信公众号,或者说扫某个二维码,这个时候呢,你扫完之后在手机上会显示一个界面,说是否同意获取你的头像等信息,你点同意或者点拒绝,这过程就叫微信授权,这个过程中呢,是由微信那官方做到的,也就是说他会给你弹个框,或者弹一个界面,里边让你做一个同意或者拒绝一个选项,是否可以获取你的信息,但这个信息中包含你的头像,包含你的open ID等值啊,所以里面有一个微信授权,这个过程是由微信官方做的。
07:02
咱们来画一下这个过程啊,一会儿咱们会进行测试啊。当然这里边强调啊,就是我们后面在测试中呢,如果说你单纯用手机测试没有问题,而我们现在因为用的是这个就是桌面版,它测试中可能有一些小bug,但是不影响我们运行,用真正手机测为这个问题啊,后面咱会说明,然后咱们往下看啊,比如现在我们到这个授权这个页面,我现在点同意,点同意之后表示是不同意,微信可以获取到他,我这个就是点同意那个微信信息,比如说现在啊,我叫张三,我用我的微信点同意,那这里面是不能得到我微信中的信息,然后微信信息中有很多,比如说有你这个微信的昵称,微信的头像,包括微信中还有一个重要的值叫open ID,你可以理解为啊,每个人的这个昵称其实可以一样,头像也可以相同,但是里边有一个唯一的标识,就叫open ID啊,这个叫授权,是由微信官方做到的。
08:06
然后这个之后我们下面怎么做呢,给大家强调啊。各位注意,因为咱们这个项目中,我们需要这么来做,让微信跟我们本地的这个数据库中用户进行这个关联,咱们要用手机号进行关联,所以这个时呢,我们要做到这个关联过程,那关联怎么做,咱们看这个部分啊,给大家说明,就是我们的下一个操作,当我点同意这个时候呢,我需要在这个微信公众号里边来配置一个就是授权的一个路径。这个路径呢,咱一般来讲在实际的这种正式号中是一个域名,但是在有些那种环境中可以是IP,但是一般我们是一个域名,需要配置一个就是授权的路径。那什么叫授权路径,给大家说明啊,刚才我提到当我点同意,我是不是要得到我这个微信的信息,包括你的昵称,包括你的其实主要是那个open ID,这要得到,那怎么得到,你并不是一个随便地址都能得到,你需要把这个哪个域名下边地址可以得到,把这个域名在微信公众号里边进行配置,配置之后才能得到。
09:21
举个例子啊,就是假如说我现在啊,配置一个域名,比如说域名叫OA。At谷CN啊,就比如这个域名,那什么意思,我后面的这口或方法,如果是在域名下的方法,那能得到你微信的open ID,如果不是这个域名下,他就得不到,假如说我现在啊,比如说我写个路径啊,举个例子啊,假如说路径我是这个名字,我叫这个din。啊,User info啊就这个意思啊,那这个时候呢,你看我这个路径是不是在他这个配置的域名里边,那他能得到这个微信信息,比如说我现在啊,写一个别的路径,比如说啊,我叫这个。
10:05
ABC啊ABC点上什么这个demo.com,然后加上比如说一个地址in user info,大家看啊,这个域名跟我配置的域名是不是就不一样了,所以在这个路径中,它就得不到你那个微信信息,所以咱们需要把域名在微信公众号中进行配置啊,配置你的域名。这是我们特别说明的啊,然后那个域名官方也做了约定,你写的时候呢,不要写那个P冒号杠杠,加上后面部分,比如我这个Oe.at归点CN。这个啊是咱要做的这个部分,为了在这个接口地址中能得到,你就是点同意之后那个微信信息,通俗说就是你谁扫了这个码,或者谁关注之后进行访问,把他的微信信息得到,这是咱们要做的这个部分。
11:01
然后这个部分是需要我们进行完成的,那这里边啊,给大家来配置一下,咱们看怎么来做。咱们现在啊,打开这个微信公众号这个管理平台,我现在是一个测试号已经打开了啊,打开之后咱们往下来看啊,注意在下边的这个位置我们找到啊在这里。大家看到啊,它叫。网页账号,网页授权获取用户信息,我把它点开。这是他的官方说明啊,然后这里边写到。需要配置的就是这个域名,然后这个下边能做这个健全受到通俗点能得到你的微信那个open ID值,咱们需要在这里边进行配置,然后配置中提到啊,它里边配置是一个域名,是一个字符串,不是URL,所以你请勿加上这个HTP后杠杠,这刚才已经说过了啊,它官方也做了说明,然后现在我们做过配置啊,怎么配置大家看这位有一个叫修改,在修改里边加上你的域名地址,因为咱们目前我这个域名是这个样子,大家看啊,我这个里边。
12:12
叫这个。什么硅谷课堂二啊,点这个域名,然后这里边的是八零,因为咱们后面是在这里我们的接口,在接口中得到你的open ID,所以我现在配置是这个域名,你要配置自己实际来,比如你加个免费的,那配它啊,我们就配置这个8800这个端口对应的这个域名在里边做配置,咱们当前的接口路径是这个。那我这里写一下啊,有这个位置,就是我们目前的实际的情况啊,是配置这个8800对应的那个内网。穿透的域名啊,因为他找不到你的本地嘛,你通过域名访问的,如果你不用内网穿透,那你需要买个服务器加个实际域名,咱目前没有那个服务器域名,我们用内网穿透配置8800对应的内网穿透域名,那这里边我来配置一下啊,我们目前是这个,所以现在你把这个复制,我这里已经配置过了,在这里边给它输入进去,点确认,它会做一个建验证,然后最终就可以了,现在我这里已经完成了,注意啊,这一步不要配置错,是你8800对应的那个接口对应的域名,因为咱们在8800接口中要写咱的方法获取你的微信的信息。
13:37
包括做那个绑定等过程啊,这个咱就完成了啊,这各位要明确。然后这个之后呢,咱们后面做的是什么呢?我这里继续写一下啊,回到这个图里边。啊,给大家啊,继续来画。然后咱们啊,就是后面做的事情,主要是这么几个事情啊,写到这里啊,首先我们会在这个就是我们这个接口的服务里边。
14:04
具体说我们这里边是880里边来创建对应的接口方法,就是创建我们具体的方法,但这个方法建的会有很多,我这里大概列一下啊,一会儿咱们会做具体实现。首先啊,我们的就是第一个方法啊,咱们对照笔记看一下,一会我会重零去写一下啊,第一个方法就是做这个授权方法,然后里边就是给他设置你具体那个就是进行回调的路径,比如说现在我这个授权之后,他要调用我刚才配置域名下面路径,然后你具体路径是哪一个路径,所以这里边我们需要做个设置,设置我们授权之后他具体要调的那个回调的路径,这个路径中能得到信息,我们通过这个微信p service中的方法,你看这个啊叫build,这个ul,通过它构。这个啊,我写一下啊,就是来设置一下你授权之后回调的那个接口的具体的路径啊,这个路径必须在我们当前这个域名下,不是这个域名下,他肯定做不到这个事情啊,然后之后我们还要写第二部分看一下啊,第二部分就是我们这个逻辑啊,在咱们比如说现在我们授权之后,他会调我们这个接口路径,这个方法也就是我们的。
15:22
User方法,在这个方法里边,咱要得到里边一个具体的值,主要就是这个值叫做open ID,通过open派D完成我们具体逻辑,比如咱们现在啊,根据它我们做一些操作,包括啊咱们做一些。相关的设置或者相关的保存等内容,最终跟我们这里边进行绑定,所以咱们要做这个事情啊,就是在我们这个。方法里边要获取到你的open ID,然后对应的功能,另外里边还有几个方法,那就是绑定手机号这个方法,因为咱们要让微信跟咱本地用户关联到一起,所以咱们通过手机号进关联,也就说我现在啊,我管理员在后台加了一个用户,加了手机号,然后用微信关注公众号进行登录授权,这个时候我们做一个手机号的关联,如果说我手机号跟我管理员加的是一样,那就是一个用户啊,这里边我们完成这个过程,比如说管理员会首先把用户都加好,微信登录,跟后台加的用户进行绑定,也是实际中一个场景,因为这种就是系统啊,大家能理解,一般来讲肯定不是用户自己注册,都是管理员把这公司里边,比如公司里边有100个人,那把100人在这里边都提前加好了,用户谁用微信登录,跟我这个用户进行绑定,绑定到自己这个用。
16:49
户上最终完成相同功能,所以大家要写一个微信账号绑定手机号这个过程方法,这是啊,我们要写的具体方法,当然里边有一些更细致部分,一会儿写的时候我们会继续提到。
17:05
以上啊,就是咱们做的一个基本过程啊,在这过程中我们涉及到啊一些相关的操作啊,这个我们就说到这里啊,然后这里边还有一些问题,因为咱们现在用到了这个security,我们需要在里边做一些配置,把一些相关的操作给它排除掉,不进行权限这个认证,包括授权,比如说咱们做这个认证的这些啊,什么获取opd的,进行绑定手机号的,在里边需要做一个给它排除这个拦截。啊,这个我也写一下啊。就是咱们的下一步操作。我写到这个位置啊。下一步操作就是我们在这个里边来排除一些拦截啊,就是把我们这个相关的路径给他。排除掉,比如说你授权的绑定手机号等等啊,都给他要排除掉。
18:04
这个二是我们要做的这个部分。我在这里边啊,继续画一下。所以咱们通过这些部分呢,可就可以把我们这个微信授权登录就最终完成啊,这是我们要做的事情啊,但是这里边在前端还需要改一些地方,这咱们一会儿进行具体修改。以上啊就是一个流程,我再重复一遍啊,然后咱开始做这个操作,首先啊,内网穿透的目的是什么呢?因为咱们就是在这个公众号中,它没法访问到咱的本地,不管你是页面还是接口都访不到,因为咱是在本地log号路径,那怎么做通过内网穿透,内网穿透因为它是一个域名,只要你能联网就能访问到,然后通过域名让它到咱的本地,我们内网穿透目的就在这里,通过它能访问到本地的9090的项目页面,能访问到8800的接口路径,这是第一个啊,然后第二个就是咱这个过程,我们现在关注微信公众号,然后点击才能中的具体功能,现在开始做授权,就是弹出微信那个框,我们点同意,点同意之后,微信就授权你可以获取那个你的微信的信息,包括昵称,包括open ID等等,但是这个过程中我们哪个路径能获取到,它不是随便获取的。咱们。
19:26
需要把你的哪个路径能获取,在微信公众号中做个配置,这个配置是一个域名,比如说我现在配置一个OA,点硅谷点CN,那这个域名下的路径就能得到你这个授权之后的微信信息,咱们主要得到是那个open ID。这个是明确啊,然后之后呢,我们需要在这里边具体来编写我们的方法,咱们目前是在这个8800的接口中编写这个方法,那咱们主要哪些方法,第一个就是设置一下你授权路径那个具体地址,比如咱们是U侧info啊,然后第二个在U侧info中来获取open ID做咱的事情,第三个要写一个绑定手机号的方法,让微信公众号跟你的本地用户绑定到一起。
20:16
这个是我们要做到的啊,然后最后这里边有些路径,我们需要在这个里边把一些新闻路径给它排除掉,它能完成我们的具体的过程。以上啊是咱们要完成的微信授权登录一个功能的这个流程说明这个咱们先就到这里啊,然后下面呢,按照流程我们具体实现一下这个具体功能。
我来说两句