微信相关开发实践系列1-微信登录

微信相关开发实践系列1-微信登录

--微信中打开网页实现微信登录

                     --APP内实现微信登录

前言：

先啰嗦几句，需要调用微信提供的API实来现微信（app或web）登录、分享、支付等相关功能的小伙伴都知道，首先必须到微信的相关平台进行注册和申请。

在做开发的过程中，官方文档已经说的很详细，只要仔细认真的阅读，再参考demo源码基本上可以解决问题，但如果少了那么一点耐心；可能开发的时候就容易掉坑里了。

加上微信提供的功能很多，有的同学从未接触微信相关开发，可能只需要实现其中的一小点功能，上来就让他去官方网站看指导，可能就会觉得比较茫然。

小卫也是个初学者，抽空把自己实践的过程，和其中认为比较重要的点和部分理解写下来，算是一个小结，也方便后面的小伙伴学习和补充。

另外目前微信的平台有三个，大部分刚接触的小伙伴在实现boss交代的工作时候，就直接被这些平台和繁琐的相关注册给搞懵了。所以有必要先介绍一下。

一、首先介绍一下微信的三个平台

1.开放平台

官方地址：https://open.weixin.qq.com/

该平台更多的的面向APP，比如APP的登录和分享、支付，在平台上创建APP应用后，就可以看到相应的接口信息：

当然接入网站也是可以的，只是相对较少(例如有的网站支持使用微信登录)。

场景就是某网站提供微信登录功能，你在pc上打开网站；使用微信方式登录，弹出一个二维码，然后你用自己的手机上微信扫描这个二维码就实现了登录功能。

1.1平台定位

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

1.2具体接入步骤

明确需求，需要使用微信登录、分享和微信支付功能，首先注册微信开发平台-开发者账号，并按照指导的流程创建自己的APP:

审核通过后，即可获得一定的初级权限（会列出来），如果获得更高如微信支付权限，需要单独申请，具体微信支付权限申请步可以参考官方文档，只要耐心的一步一步做下去。

1.3数据统计

微信开放平台还提供了数据统计功能，用于开发者统计接入应用的登录、分享等数据情况。

2.公众平台

官方地址：https://mp.weixin.qq.com/

我们在使用微信的时候经常会需要关注一些公众号，这个公众号的开发就是在公众平台上的。像根据用户发送的消息进行自动回复，生成二维码，获取用户地理位置等等。公众号内登录、支付都可以基于微信公众平台进行开发（包括微信内打开的自己的web页面需要实现登录和支付功能，都首先需要依赖公众号的相关能力支持）。

3.商户平台

官方地址：https://pay.weixin.qq.com

商户平台主要就是做微信支付用的，如果APP或者公众号需要接入支付功能，那么就需要在这个商户平台上进行申请，申请成功后会得到相应的商户平台的账号，后续的支付订单等数据都是在这里。算是为支付单独列出了一个平台。

二、这里先讲微信内web网页登录（公众号打开自己的网页或用微信浏览器打开的网页）

使用场景很简单：用户在微信app内，打开朋友圈、朋友分享的web网页，或者打开公众号菜单中自定义的web网页，此时利用微信公开的api来实现获取用户微信头像、昵称等信息，并实现登录流程（并在自己的业务中完成用户注册功能）。

完成以上需求，我们需要做以下工作：
1.微信公众号注册

2.公众号内相关配置

3.具体的开发工作

1.微信公众号注册

微信公众号分3种，

A：一种是订阅号，个人可以申请。

B：一种是服务号，公司可以申请。

C：第三种是企业号，功能更强大可以做二次开发。

其中服务号，能提供登录功能的申请，而支付权限必须是服务号来申请。

PS:现在的小程序权限申请也在公众号平台，这方面小卫还没有学习到是怎么个申请的。

另外一般一个团队的公众号是由专人维护的；认证管理等工作，码农基本上不用太关心；但是如果没有相关人员那码农就要全权负责了；不用担心根据微信的提示一步一步去做就行了；分分钟可以搞定；基本上没有坑。

2.公众号内相关配置

公众号有了；就来看下需要做些什么配置，这里有坑请注意，在公众号界面你会发现有这么一个菜单（最后），接口权限，点进去，发现里面列了很多，找到 网页服务-网页授权-网页授权获取用户基本信息，点击修改；配置授权域名。 这个设置 也可以点击菜单 “公众号设置”-“功能设置”

设置这个域名的目的是在做获取用户信息的过程中，需要一个回调接口，这个接口的主目录必须是在这个域名之下。

如果单单实现网页登录，只要配置这个，因为微信公众号配置较多，所以不要被干扰了。

3.具体的开发工作

先认真阅读以下官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN

几个说明

3.1步骤解释（以下是官方的说明，补充一下自己的理解）

第一步：用户同意授权，获取code（微信跳出一个界面提示说获取你的昵称或头像，是否允许），在自己的页面界面让用户触发，触发的时候就是调用微信的接口（匹配好参数，匹配好参数，严格按照指导的顺序和要求）。配置的授权域名就是给这个地址用的，开发中如果发现有问题；大部分是这个地址没有配置好。格式是：redirect_uri = 配置的url+xx.html,不能有其他中间目录路径。（xx.html就是接口的名字）

第二步：通过code换取网页授权access_token（获得访问权限）

第三步：刷新access_token（如果需要）

第四步：拉取用户信息(需scope为snsapi_userinfo)

3.2步骤补充理解

个人认为其中 第一步 是放在前端 来触发，二三四步 可以通过 后台来实现。

简化下来的步骤就是：

第一步：前端网页（自动或手动）触发授权，调用微信接口，提示用户授权，其中有个重要的参数：redirect_uri，授权后页面跳转到redirect_uri并自动拼上code state参数。

第二步：redirect_uri调用后台的接口，后台获取到用户信息后，处理业务（注册等），并将信息返回给前端回调，redirect_uri数据返回后，重定向地址。

第三步：前端重定向刷新界面，显示登录结果信息（注册结果等）

实践：用户点击登录（wxlogin.html--重定向到微信授权接口）--授权成功流程转到redirect_uri（getUser）这个是一个后台接口 – 接口返回信息，根据返回结果，重定向前台地址。

这里要说明的是，比较规范的做法是，前端只负责调用一个接口，等待接口的返回信息。

所有的流程都交给后台进行，后台返回信息，收到后台的返回信息之后，前端做出相应的处理；这个一个比较好的做法；不要再前端做文档中的相关接口的调用工作。

3.3参数补充理解

官方文档中有一段话是这么说

关于特殊场景下的静默授权

1、上面已经提到，对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知； 

2、对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。 

这个我的理解是：

--如果业务不需要获取用户头像和昵称，用snsapi_base，无授权界面弹出

--如果业务需要获取用户头像和昵称，snsapi_userinfo，在公众号内打开无界面弹出；直接打开网页地址，在未关注公众号的情况下，有授权界面弹出。

Ps：目前网页上的微信登录，只能在微信内使用，例如使用其他浏览器打开网页是不能使用微信登录功能

三、APP内的微信登录

场景：自己开发的APP，需求能调用微信APP授权，授权后获取到用户的头像和昵称进行注册登录。

其实本质上来讲，APP内的登录和web登录的基本流程都是一样的。只是因为是app开发，所以多了一套app本身的一些流程。

三步（同样，每一步的具体过程都有详细的官方指导，这里还是说明一些重要的注意点和关键流程）

1.      微信开放平台申请一个账号https://open.weixin.qq.com/

2.      登录开放平台创建自己APP

3.      开始开发

1.微信开放平台的注册

邮箱注册，而且必须激活；所以不要瞎填。

现在比较严格了有的权限还必须要交钱认证等，如果没人做这些工作；码农必须亲自上阵。

2.创建自己的APP

开通账号之后再平台主页面

选择第一个；了解更多

创建

其实这些工作没有特别复杂的地方；一步一步跟着官方指导来就行了。填写完了之后，提交微信审核，一般一两天之内就会审核结果反馈。

审核通过之后，点击你自己的应用看到如下界面，一般情况下；分享和登录功能都是自动获得的。

3.开始开发

有了以上工作；就正式进入到开发工作。（其实一个官方demo源码+开发指导就解决了所有问题），这里说明一下可能会遇到的坑。

官方指导：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=&lang=zh_CN

小卫第一次解决微信登录的时候百度；第一次看的内容就是这个指导（还未看官方demo），第一印象就是说的比较专业然后好绕啊；第一遍看完了云里雾里（可能太笨了），第二遍再仔细看就基本上理解其中的意思了。后面再看官方demo就觉得很清晰。其实获取用户信息的工作是放到产品的服务后台来做的；app只负责发起和接受信息，一般的产品开发也是按照这个流程来做的。不排除app把所有的工作都自己做了。

开发三步骤

1.      android开发环境搭建（这一步就略）

2.      接入微信sdk

3.      发起登录流程

3.1android接入微信sdk

官方指导：https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417751808&token=&lang=zh_CN

这一步是基础，不管是做app微信分享、登录、支付，这是必须的一步；所以说是基础。严格按照官方的知道来做就行了

 

 

 

3.2关键代码部分注意点

代码部分的流程是这样的,这里以java代码为例，iOS端流程也是类似的。

1.      调用sdk，发起授权

    Final SendAuth.Req req = new SendAuth.Req();
    req.scope = "snsapi_userinfo";
    req.state = "wechat_sdk_demo_test";
    api.sendReq(req);

2.      授权允许得到code

3.      通过code获取用户数据（一般由自己的业务服务器完成）

得到code之后，调用如下微信接口

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

获得openid，和access_token

然后调用

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

获得用户头像、昵称等个人信息

以上两个接口建议在自己的业务服务器完成；并结合自己的业务完成注册用户记录等相关功能，通过提供一个统一的接口给app返回相关信息。

 

强调官方说的几个要点，也是最容易坑人的地

注意点1：

有的同学可能拷贝了官方代码之后，忘了改成自己的APPID或Secret，所以要注意.，然后老是不成功，还在那转圈，这是不认真看官方指导和初步接触的人最容易犯的低级错误；往往拷贝了一份别人成功的demo；很多地方忘记改了；注意点2其实也类似。

注意点2：

在你的包名相应目录下新建一个wxapi目录，并在该wxapi目录下新增一个WXEntryActivity类，该类继承自Activity（例如应用程序的包名为net.sourceforge.simcpux，则新添加的类如下图所示）

注意一定要是自己的包名+ wxapi，是固定的，不要瞎写其他名字

并在manifest文件里面加上exported属性，设置为true，例如：

这个时候相应的网络权限等也要配置上，直接copy demo中的就行了，不能少了。

注意点3：

当微信发送请求到你的应用，将通过IWXAPIEventHandler接口的onReq方法进行回调，类似的，应用请求微信的响应结果将通过onResp回调。

我们用到的就是这里的onResp，这里其实和web有点类似；你向微信发送请求；然后微信返回信息；微信返回到哪里呢，就是固定命名的那个activity，并且有对应的回调方法onResp来处理。

这里需要重点说明的一个地方；官方指导是没有说明的，就是登录和分享发起之后都是返回到WXEntryActivity来处理的；因此回到函数就要做出区分；到底是分享还是登录；小卫的代码如下：

@Override

    public voidonResp(BaseResp resp) {

       String result ="";

       String code ="";

       if (resp.getType()==WEIXIN_MSG_TYPE_LOGIN){

           switch (resp.errCode){

           略：

           }

       }else {

           switch (resp.errCode){

           略：

           }

           finish();

       }

    }

private static final int WEIXIN_MSG_TYPE_LOGIN =1;

private static final int WEIXIN_MSG_TYPE_SHARE = 2;

登录是1，分享2，需要分开处理。

这里顺带说明一下支付的文件是同目录，固定类名是WXPayEntryActivity

有的同学有时候不注意看；把支付的流程也写到登录文件里面去了；导致支付是成功了，但是没有收到回调；这里也是一个坑

 

微信登录这里说了两种：

app内登录

网页内登录

还有一种是pc网站上使用微信登录时，提示用户扫描二维码登录，时间关系下次补充。

好了小伙伴们，时间关系，今天先写到这里，有不对的地方欢迎指正和补充

 

预告：下一次总结：微信支付相关（app内支付、网页上支付、扫码支付）

说明：其中网页上的支付和扫码支付都是在公众号平台申请和配置的，app内支付在

开放平台申请和配置，但两个平台都需要用到商户平台（通俗讲就是都需要到商户平台注册收钱的账户，另外支付功能是对企业级（组织）开放的，而且各平台的账户都要交钱认证等）