兄弟们，就是干 微信三方登录绝对干货

微信第三方登录绝对干货

课程介绍
1. 用户登录-账号登录;（掌握）
2. 三方登录概述;（理解）
3. 三方登录协议-Oauth2.0;（了解）
4. 三方登录选择-微信三方登录;（掌握）
5. 微信三方登录实战;（掌握）
前台登录：
1）账号登录
2）三方登录
3）验证码登录 自己做
4）扫码登录-做不了

1.前台登录-账号登录

1）后台登录接口
2）前台登录实现并且保存loginInfo和token到localStorage,登录成功跳转首页，并展示用户名
3）前台通过axios的前置拦截器携带token到后台
4）后台做token的登录拦截器，如果没有回报错给前台
5）前台通过axios后置拦截器对后台登录拦截错误进行跳转到登录页面
6）前台也要做拦截-有的地址是不需要访问后台

前提：login.html中集成axios和vue

<!--引入vue和axios-->
<script src="js/plugins/vue/dist/vue.js"></script>
<script src="js/plugins/axios/dist/axios.js"></script>
<!--全局配置axios-->
<script src="js/common.js"></script>




<script type="text/javascript">
   new Vue({
      el:".login-form",
      data:{

      },
      methods:{

      },
      mounted(){
          alert(this.$http)
      }
   });
</script>

和后台账号登录差不多
7）后台登录接口
8）前台登录实现并且保存uUser和uToken到localStorage
9）前台通过axios的前置拦截器携带token到后台
10）后台做token的登录拦截器，如果没有回报错给前台
11）前台通过axios后置拦截器对后台登录拦截错误进行跳转到登录页面
12）前台也要做拦截-有的地址是不需要访问后台

1.1.前台登录

暂时不依赖
两个不同的域名的localStorage不能直接互相访问。那么如何在aaa.com中如何调用bbb.com的localStorage?

login(){
                // alert(this.loginInfo)
   // console.log(this.loginInfo)
   this.$http.post("/login/account",this.loginInfo)
                    .then(result => {
                        result = result.data; //{success,message,resultobj}
                        console.log(result)
                        if (result.success) {
                            let {token, user} = result.resultObj;
                            localStorage.setItem('uToken', token);
                            alert(localStorage.getItem("token"));
                            //JSON.stringify(user) 把对象转换为json字符串
                            localStorage.setItem('uUser', JSON.stringify(user));
                            //跳转到主页
            location.href = "/index.html"
                        }else{
                            alert(result.message)
                        }

                    })
                    .catch(result => {
                        alert("系统错误！")
                    })
}

1.2.axios携带token-common.js

//==============axios前置拦截器实现每次携带token======================//
axios.interceptors.request.use(config=>{
    let token = localStorage.getItem("token");
    if(token){
        //携带token
        config.headers["token"] = token;
    }

    return config;
},error => {
    Promise.reject(error)
})
//==============axios前置拦截器实现每次携带token======================//

1.3.axios后置处理后台拦截错误-common.js

//==============axios后台拦截器实现后端已经退出登录的跳转登录页面======================//
axios.interceptors.response.use(config=>{
    let data = config.data;
    if(!data.success && "noLogin"===data.message)
    {
        localStorage.removeItem("token");
        localStorage.removeItem("loginInfo");
        location.href = "/login.html";
    }
    return config;
},error => {
    Promise.reject(error)
})
//==============axios后台拦截器实现后端已经退出登录的跳转登录页面======================//

1.4.前台登录拦截-common.js

//前端的登录拦截-common.js会被所有的界面导入
// 判断localStorage中是否有logininfo
let url = location.href;
//不是登录且不是注册，就要拦截
if(url.indexOf("login.html")==-1 && url.indexOf("register.html")==-1)
{
    let loginInfo = localStorage.getItem("loginInfo");
    if(!loginInfo){
        location.href = "/login.html"
    }
}

2.三方登录概述

2.1.什么是三方登录
用户可以在三方主流平台（微信，qq，支付宝。。）登录，然后自己平台就不需要登录了。基于用户在主流平台上已有的账号和密码来快速完成己方应用的登录或者注册的功能。而这里的主流平台，一般是已经拥有大量用户的平台，国外的比如Facebook，Twitter等，国内的比如微博、微信、QQ等。 第三方登录的目的是使用用户在其他平台上频繁使用的账号，来快速登内录己方产品，也可以实现不注容册就能登录，好处就是登录比较快捷，不用注册。
2.2.为什么需要

用户:少记忆账号了
2.3.优缺点
优点：这些系统有很大的用户群体；有这些大平台背景，用户的接收度和认可度较好；直接登录，避免用户注册和登录的繁琐过程。这样，可以比较好的推广自己的网站和粘主用户。
缺点：要交钱，除了三方登录还要实现其他的。

2.4.使用场景
面向互联网用户一般都需要三方登录。

3.三方登录协议-OAuth2.0

OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此OAUTH是安全的。oAuth是Open Authorization的简写，目前的版本是2.0版。

https://oauth.net/2/
3.1.应用场景
为了让大家理解OAuth的适用场合，下面我先举一个栗子。
有一个“云打印”的网站，可以将用户存储在QQ的照片打印出来。用户为了使用该服务，必须让“云打印”读取自己存储在QQ上的照片。

问题是，只有得到用户的授权，QQ才同意“云打印”读取这些照片。那么“云打印”如何才能获得QQ用户的授权呢？有比较传统的方法，用户自己将QQ的用户名和密码告诉“云打印”，后者就可以读取用户的照片了。但是，这么做会有以下几个严重的缺点：

（1）“云打印”为了后续的服务，会保存用户的用户名和密码，这样很不安全。
（2）“云打印”拥有了获取用户在QQ上所有资料的权利，用户没有办法限制“云打印”的访问资 源的权限和有限期。
（3）用户只有修改密码，才能收回“云打印”的权限。但是这么做，会使得其他所有获得用户授权 的第三方应用程序全部失效。
（4）只要有一个第三方应用程序被破解，就会导致用户密码泄露，以及所有被这个密码保护的数据 也会泄露

OAuth就是为了解决上面这些问题而诞生的。 我们平台需要保存三方平台账号和密码
3.2.名词定义
在详细介绍OAuth2.0之前，需要了解几个专有名词，这些名词经常出现在各种应用场合，对于我们理解RCF 6749的内容至关重要。

（1）Third-party application：第三方应用程序，本文中又称"客户端"（client），即栗子中的"云打印"。
（2）HTTP service：HTTP服务提供商，本文中简称"服务提供商"，即上一节例子中的QQ。
（3）Resource Owner：资源所有者，本文中又称"用户"（user）。
（4）User Agent：用户代理，本文中就是指浏览器。
（5）Authorization server：认证服务器，即服务提供商专门用来处理认证的服务器。
（6）Resource server：资源服务器，即服务提供商存放用户生成的资源的服务器。它与认证服务器，可以是同一台服务器，也可以是不同的服务器

了解了上面的名词，就不难理解OAuth的作用就是让“客户端”安全可控的获取“用户”的授权，与“服务提供商”进行互动。

3.3.OAuth的思路
OAuth在"客户端"与"服务提供商"之间，设置了一个授权层（authorization layer）。“客户端"不能直接登录"服务提供商”，只能登录授权层，以此将用户与客户端区分开来。"客户端"登录授权层使用的是令牌（token），与用户的密码不同。用户可以在登录的