微信公众号绑定用户信息

一、概述

微信公众号与用户绑定的目的是，用户关注公众号后我们可以拿到用户的openId，用户首次登录时我们检查到库中没有存着openId，于是我们跳转到绑定页面，提示用户输入用户名和密码进行绑定。下次用户登录时，即使本地localstorage没有了，用户也可以直接进入我们的主页面。

二、微信公众号添加菜单

添加微信公众号菜单联系相关负责人15期贺信（12月份可以联系13期刘雅雯，因为她有一个月的权限）。

添加的菜单要按照如下要求：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2b9d806c89ac57dc&redirect_uri=http://dmsdbj.com/auth-web/loginThird/plantForm&scope=snsapi_base&response_type=code&state=http://dmsdbj.com/auth-web/navigation/frame@http://dmsdbj.com/auth-web/navigation/thirdLoginBind&connect_redirect=1#wechat_redirect

对以上内容进行如下说明：

非红线部分和非紫线部分，需要按照如上的要求来做，不做更改。

红线部分和紫线部分分别为首页的url和绑定页面的url，大家需要按照自己项目来配置。绑定页面需要每个项目自己做，该文档的同级目录下有绑定页面的源码参考，如果大家不想自己做的话，可以直接使用。

三、前端页面配置

3.1首页配置

1. 首页的component.ts中

增加引入：

import {Router,ActivatedRoute} from '@angular/router';

 

在ngOnInit（）的构造方法（花括号）中增加：

//通过第三方登录     var token=this.route.snapshot.queryParams['token'];     var uid=this.route.snapshot.queryParams['uid']     if(token !=undefined){ //第三方登录 this.thirdLogin(token,uid); }

增加方法如下：

//第三方登录   public thirdLogin(token:string,uid:string){     //根据uid查询登录用户信息，存在localstorage中并完成跳转     //保存token信息     localStorage.setItem('Authorization', token);     let userInfoUrl="auth-web/loginThird/findLoginUserByCode/"+uid;     this.http.get(userInfoUrl).subscribe(       res=>{         if (res.json().code == '0000'){           localStorage.setItem('userId', res.json().data.id);             localStorage.setItem('roleId', res.json().data.roleId);             localStorage.setItem('userCode', res.json().data.userCode);             localStorage.setItem('userName', res.json().data.userName);             localStorage.setItem('companyId',res.json().data.companyId);             localStorage.setItem('schoolNo',res.json().data.schoolNo);                        this.router.navigateByUrl('workspace');         }       }     )   }

注意：红线部分的跳转路由，是指向首页（非登录页面）的路由

 

3.2绑定页面配置

在login的文件夹下增加组件 third-login,组件所需的.css,.html, .ts，均在同级文件名为third-login的文件夹中

 

3.4修改shared.module.ts

增加组件的引用

import { ThirdLoginComponent } from '../login/third-login/third-login.component';

 

在declarations 的声明中（中括号），增加ThirdLoginComponent

在exports 中增加 ThirdLoginComponent

 

注意：此处需检查app.modules.ts中是否引入ThirdLoginComponent，如果引入需要删除此处引入

3.5 app.routes.ts

在app的路由中增加引用：

import { ThirdLoginComponent } from './login/third-login/third-login.component';

同时添加路由配置：

{     path: 'thirdLogin',     component: ThirdLoginComponent  },