H5打包成app的方式是将网页应用框架进行打包,使其可以在移动设备上以原生应用程序的方式运行,这种方式让许多企业可以以更快的速度推出自己的移动应用程序。微信登录是目前许多应用程序的必选功能,那么在H5打包成app之后,如何调用微信登录呢?本篇文章将带大家一起了解一下。
一、微信登录原理
微信登录基于OAuth2.0协议实现,该协议规定了一些标准的接口和步骤,开发者需要向微信开放平台注册应用并获取APP_ID和APP_SECRET才能对接微信登录功能。
二、H5打包成app中微信登录流程
1.获取微信授权链接
首先,在应用中需要通过APP_ID、REDIRECT_URI、SCOPE等参数生成授权链接,跳转至微信平台授权页面。
APP_ID:应用ID,通过微信开放平台获取。
REDIRECT_URI:授权完成后重定向地址,即返回应用页面的URL地址。
SCOPE:授权方式,分为两种——基本信息授权和用户信息授权,具体包括以下两种形式:
snsapi_base:获取用户openid(在用户无需手动授权的情况下完成,但只获得用户openid,无法获得用户信息)
snsapi_userinfo:获取用户基本信息(必须通过用户手动授权完成,可以获得用户详细信息,如昵称、头像等)
2.微信用户同意授权后,自动跳转回指定页面
用户在微信平台授权页面完成授权后,微信会根据REDIRECT_URI跳转返回至应用页面,并携带code参数。
3.通过code参数获取access_token
应用服务器收到微信返回的code后,需要通过下面的API向微信服务器发送请求以获取access_token和openid,其中APP_SECRET需要在应用开发时填写,不能暴露在前端代码中:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
4.access_token被获取成功之后,就可以使用微信登录功能了。如果应用程序存在账号系统,接下来便可根据openid实现用户登录。
三、H5打包成app中调用微信登录
1.引入微信登录JS-SDK
在HTML文件头部,引入微信登录JS-SDK:
```html
```
2.调用微信登录授权窗口
```javascript
var obj = new WxLogin({
id: "login_container",
appid: "APP_ID",
scope: "snsapi_login",
redirect_uri: "REDIRECT_URI",
state: "STATE",
style: "",
href: ""
});
```
其中,APP_ID和REDIRECT_URI需要在开发时向微信开放平台申请。
3.接受微信返回的code参数
```javascript
var code = GetQueryString("code");
```
注:GetQueryString方法是获取URL参数的通用方法。
4.请求获取access_token和openid
```javascript
$.ajax({
type: "GET",
url: "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APP_ID&secret=APP_SECRET&code=" + code + "&grant_type=authorization_code",
success: function(data){
// TODO 处理获取access_token和openid后的操作
}
});
```
其中,APP_ID和APP_SECRET需要在应用开发时申请并填写。
5.获取用户基本信息
在2步骤中,SCOPE参数需要设置为snsapi_userinfo,如果获取到了access_token和openid,接着可以通过以下API获取用户基本信息:
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中,ACCESS_TOKEN和OPENID需要在4步骤中获取到。获取到的用户信息可自行处理。
四、总结
以上就是在H5打包成app中实现微信登录的详细流程,需要注意的是,微信登录才可以实现,必须要向微信开放平台注册应用并获取APP_ID和APP_SECRET。同时,应用开发中无论是前端还是后端,都应该注意安全问题,APP_SECRET等关键信息不应该直接暴露,可以使用加密方式进行传输和保存。