Dans le développement de WeChat, il y a souvent de tels besoins : obtenir des avatars d'utilisateurs, lier un identifiant WeChat pour envoyer des messages aux utilisateurs... Alors la condition préalable pour y parvenir est l'autorisation !

1. Configurez un nom de domaine de rappel sécurisé?:

Avant que le compte officiel WeChat ne demande la page Web de l'utilisateur autorisation, les développeurs doivent d'abord accéder aux options de configuration "Développement - Autorisations d'interface - Services Web - Comptes Web - Autorisation Web pour obtenir des informations utilisateur de base" sur le site officiel de la plateforme publique pour modifier le nom de domaine de rappel d'autorisation. notant que le nom de domaine complet est écrit directement ici. Tel que : www.liliangel.cn. Cependant, lorsque nous développons h5, nous utilisons généralement des noms de domaine de deuxième niveau, tels que h5.liliangel.cn, qui figure également dans le nom de domaine de rappel de sécurité.

2. Autorisation au niveau de l'utilisateur et autorisation silencieuse

1 L'autorisation de page Web initiée avec snsapi_base car la portée est utilisée pour obtenir. L'openid de l'utilisateur qui entre dans la page est autorisé en silence et passe automatiquement à la page de rappel. Ce que l'utilisateur per?oit, c'est qu'il accède directement à la page de rappel.

2. Autorisation de page Web initiée avec snsapi_userinfo car la portée est utilisée pour obtenir les informations de base de l'utilisateur. Cependant, ce type d'autorisation nécessite le consentement manuel de l'utilisateur, et puisque l'utilisateur a accepté, les informations de base de l'utilisateur peuvent être obtenues après autorisation sans y prêter attention.

3. La différence entre l'autorisation de page Web access_token et l'access_token ordinaire

1. L'autorisation de page Web WeChat est mise en ?uvre via le mécanisme OAuth2.0. compte officiel, Le compte public peut obtenir un certificat d'appel d'interface spécifique à l'autorisation de page Web (access_token d'autorisation de page Web). Grace au access_token d'autorisation de page Web, l'appel d'interface post-autorisation peut être effectué, par exemple pour obtenir des informations utilisateur de base. >

2. D'autres interfaces WeChat doivent être transmises. L'interface "get access_token" dans le support de base est utilisée pour obtenir l'appel access_token ordinaire.

4. Guidez l'utilisateur pour qu'il accède à la page d'autorisation pour accepter l'autorisation et obtenir le code

Après la mise à jour de WeChat, la page d'autorisation a également changé. En fait, je suis habituée à la page verte classique..

js:

var?center?=?{
????????init:?function(){
????????????.....
????????},
????????enterWxAuthor:?function(){
????????????var?wxUserInfo?=?localStorage.getItem("wxUserInfo");
????????????if?(!wxUserInfo)?{
????????????????var?code?=?common.getUrlParameter('code');
????????????????if?(code)?{
????????????????????common.getWxUserInfo();
????????????????????center.init();
????????????????}else{
????????????????????//沒有微信用戶信息，沒有授權(quán)-->>?需要授權(quán)，跳轉(zhuǎn)授權(quán)頁面
????????????????????window.location.href?=?'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+?WX_APPID?+'&redirect_uri='+?window.location.href?+'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
????????????????}
????????????}else{
????????????????center.init();
????????????}
????????}
}
$(document).ready(function()?{?
????center.enterWxAuthor();
}

Prenons scope=snsapi_userinfo comme exemple. Lorsque la page est chargée, elle entre dans la méthode d'autorisation. Tout d'abord, elle obtient l'objet wxUserInfo du cache. S'il y a une description qu'elle a été autorisée auparavant, il entre directement dans la méthode d'initialisation. Sinon, déterminez si l'URL contient un code. S'il y a un code, cela indique qu'il s'agit de la page après avoir entré le rappel de la page d'autorisation. Ensuite, le code peut être échangé contre des informations utilisateur. Il n'y a pas de code, c'est-à-dire que l'utilisateur entre dans la page pour la première fois et est dirigé vers la page d'autorisation. Le redirect_uri est l'adresse de la page actuelle.

Méthode getWxUserInfo?:

/**
?????*?授權(quán)后獲取用戶的基本信息
?????*/
????getWxUserInfo:function(par){
????????var?code?=?common.getUrlParameter("code");
????????
????????if?(par)?code?=?par;
????????
????????$.ajax({
????????????async:?false,
????????????data:?{code:code},
????????????type?:?"GET",
????????????url?:?WX_ROOT?+?"wechat/authorization",
????????????success?:?function(json)?{
????????????????if?(json){
????????????????????try?{
????????????????????????//保證寫入的wxUserInfo是正確的
????????????????????????var?data?=?JSON.parse(json);
????????????????????????if?(data.openid)?{
????????????????????????????localStorage.setItem('wxUserInfo',json);//寫緩存--微信用戶信息
????????????????????????}
????????????????????}?catch?(e)?{
????????????????????????//?TODO:?handle?exception
????????????????????}
????????????????}
????????????}
????????});
????},

5. Backend reposant- - /wechat/authorization, échangez les informations de l'utilisateur selon le code

　　/**
?????*?微信授權(quán)
?????*?@param?code?使用一次后失效
?????*?
?????*?@return?用戶基本信息
?????*?@throws?IOException?
?????*/
????@RequestMapping(value?=?"/authorization",?method?=?RequestMethod.GET)????public?void?authorizationWeixin(
????????????@RequestParam?String?code,
????????????HttpServletRequest?request,?
????????????HttpServletResponse?response)?throws?IOException{
????????request.setCharacterEncoding("UTF-8");??
????????response.setCharacterEncoding("UTF-8");?

????????PrintWriter?out?=?response.getWriter();
????????LOGGER.info("RestFul?of?authorization?parameters?code:{}",code);????????
????????try?{
????????????String?rs?=?wechatService.getOauthAccessToken(code);
????????????out.write(rs);
????????????LOGGER.info("RestFul?of?authorization?is?successful.",rs);
????????}?catch?(Exception?e)?{
????????????LOGGER.error("RestFul?of?authorization?is?error.",e);
????????}finally{
????????????out.close();
????????}
????}

Voici un Autoriser access_token, rappelez-vous : Authorize access_token n'est pas un access_token global, et vous devez utiliser le cache. Ici, j'utilise redis, je n'entrerai pas dans la configuration spécifique et j'écrirai un article de blog sur la configuration connexe plus tard. utilisez également ehcache. La configuration de ehcahe est dans mon premier blog.

　　/**
?????*?根據(jù)code?獲取授權(quán)的token?僅限授權(quán)時使用，與全局的access_token不同
?????*?@param?code
?????*?@return
?????*?@throws?IOException?
?????*?@throws?ClientProtocolException?
?????*/
????public?String?getOauthAccessToken(String?code)?throws?ClientProtocolException,?IOException{
????????String?data?=?redisService.get("WEIXIN_SQ_ACCESS_TOKEN");
????????String?rs_access_token?=?null;
????????String?rs_openid?=?null;
????????String?url?=?WX_OAUTH_ACCESS_TOKEN_URL?+?"?appid="+WX_APPID+"&secret="+WX_APPSECRET+"&code="+code+"&grant_type=authorization_code";????????if?(StringUtils.isEmpty(data))?{????????????synchronized?(this)?{????????????????//已過期，需要刷新
????????????????String?hs?=?apiService.doGet(url);
????????????????JSONObject?json?=?JSONObject.parseObject(hs);
????????????????String?refresh_token?=?json.getString("refresh_token");
????
????????????????String?refresh_url?=?"https://api.weixin.qq.com/sns/oauth2/refresh_token?appid="+WX_APPID+"&grant_type=refresh_token&refresh_token="+refresh_token;
????????????????String?r_hs?=?apiService.doGet(refresh_url);
????????????????JSONObject?r_json?=?JSONObject.parseObject(r_hs);
????????????????String?r_access_token?=?r_json.getString("access_token");
????????????????String?r_expires_in?=?r_json.getString("expires_in");
????????????????rs_openid?=?r_json.getString("openid");
????????????????
????????????????rs_access_token?=?r_access_token;
????????????????redisService.set("WEIXIN_SQ_ACCESS_TOKEN",?r_access_token,?Integer.parseInt(r_expires_in)?-?3600);
????????????????LOGGER.info("Set?sq?access_token?to?redis?is?successful.parameters?time:{},realtime",Integer.parseInt(r_expires_in),?Integer.parseInt(r_expires_in)?-?3600);
????????????}
????????}else{????????????//還沒有過期
????????????String?hs?=?apiService.doGet(url);
????????????JSONObject?json?=?JSONObject.parseObject(hs);
????????????rs_access_token?=?json.getString("access_token");
????????????rs_openid?=?json.getString("openid");
????????????LOGGER.info("Get?sq?access_token?from?redis?is?successful.rs_access_token:{},rs_openid:{}",rs_access_token,rs_openid);
????????}????????
????????return?getOauthUserInfo(rs_access_token,rs_openid);
????}
　　/**
?????*?根據(jù)授權(quán)token獲取用戶信息
?????*?@param?access_token
?????*?@param?openid
?????*?@return
?????*/
????public?String?getOauthUserInfo(String?access_token,String?openid){
????????String?url?=?"https://api.weixin.qq.com/sns/userinfo?access_token="+?access_token?+"&openid="+?openid?+"&lang=zh_CN";????????
????????try?{
????????????String?hs?=?apiService.doGet(url);????????????
????????????//保存用戶信息????????????
????????????saveWeixinUser(hs);????????????
????????????return?hs;
????????}?catch?(IOException?e)?{
????????????LOGGER.error("RestFul?of?authorization?is?error.",e);
????????}????????
????????return?null;
????}

J'étais pressé et le nom du code prêtait à confusion. Comme vous pouvez le voir, j'ai utilisé une méthode synchrone. Tout d'abord, j'ai obtenu la clé WEIXIN_SQ_ACCESS_TOKEN du cache. Si j'ai obtenu la description et qu'elle n'a pas expiré, j'ai directement appelé l'interface fournie par WeChat via httpclient et j'ai renvoyé la cha?ne d'informations utilisateur. à l'avant. S'il n'est pas obtenu, cela signifie qu'il n'existe pas ou qu'il a expiré. Rafra?chissez ensuite le access_token en fonction du rafra?chir_token puis écrivez le cache Comme le access_token a une courte période de validité, pour être s?r, je configure le cache. heure d'expiration ici et soustrayez une heure de l'heure indiquée par WeChat. En repensant au code, j'ai découvert qu'il y avait un léger problème avec la logique ci-dessus. L'écrire de cette fa?on entra?nera l'actualisation du access_token pour la première fois ou après l'expiration du cache. Cela n'affecte pas l'utilisation pour le moment. L'optimisation et la modification de TODO seront effectuées ultérieurement.

6?: Enregistrer les informations utilisateur

Normalement, après autorisation, nous enregistrerons les informations utilisateur dans la table de la base de données, openid est la seule clé primaire et la clé étrangère est associée à notre propre utilisateur tableau, donc, peu importe les activités à mener à l'avenir, ou s'il s'agit de faire des statistiques de données opérationnelles, il existe une relation avec le compte officiel WeChat.

Il convient de noter que le headimgurl que nous avons obtenu est une adresse URL fournie par WeChat. Lorsque l'utilisateur modifie l'avatar, l'adresse d'origine peut devenir invalide, il est donc préférable de sauvegarder l'image sur un serveur local, puis de sauvegarder l'image. URL de l'adresse locale.

Valeur renvoyée par WeChat?:

Pour plus d'articles sur l'autorisation de page Web d'auteur pour le développement de WeChat, veuillez faire attention au site Web PHP chinois?!