随着功能丰富的前端框架(如AngularJS)的出现, 越来越多的逻辑正在前端实现, 例如数据操作/验证, 身份验证, 和更多的. Satellizer, AngularJS中一个易于使用的基于令牌的身份验证模块, 简化了在AngularJS中实现认证机制的过程, 该库内置了对Google的支持, 脸谱网, LinkedIn, 推特, Instagram, GitHub, Bitbucket都, Yahoo, Twitch, 和微软(Windows Live)账户.

在本文中，我们将构建一个非常简单的web应用程序 here 哪个允许您登录并查看当前用户的信息.

身份验证vs授权

当你的应用开始整合用户系统时，你经常会遇到这两个可怕的词. 根据维基百科:

身份验证 确认某一实体所声称的单个数据(数据)的某一属性为真的行为是否为真.

授权 指定对资源的访问权限的功能是否与一般的信息安全和计算机安全有关，特别是与访问控制有关.

通俗地说，让我们举一个博客网站的例子，上面有一些人在工作. 博主写文章，管理器验证内容. 每个人都可以通过身份验证(登录)进入系统，但他们的权限(授权)是不同的, 因此，博主不能验证内容，而管理员可以.

为什么Satellizer

你可以在AngularJS中创建你自己的认证系统，通过下面的教程: JSON Web令牌教程:Laravel和AngularJS中的一个例子. 我建议阅读这篇文章，因为它很好地解释了JWT (JSON Web Token), 并展示了一种在AngularJS中直接使用本地存储和HTTP拦截器实现身份验证的简单方法.

那么为什么是卫星卫星呢? 主要原因是它支持脸谱网等少数社交网络登录, 推特, etc. 现在, 尤其是在移动设备上使用的网站, 输入用户名和密码是相当麻烦的，用户希望能够使用你的网站，使用社交登录几乎没有障碍. 因为整合每个社交网络的SDK并遵循它们的文档是非常重复的, 如果能以最小的努力支持这些社交登录，那就太好了.

此外，卫星卫星是一个 active 项目在Github. 活跃是这里的关键，因为这些SDK变化非常频繁，你不想时不时地阅读他们的文档(任何使用脸谱网 SDK的人都知道这有多烦人)。

带有脸谱网登录的AngularJS应用程序

这就是事情开始变得有趣的地方.

我们将建立一个web应用程序，有定期登录/注册(i.e. 使用用户名，密码)机制，并支持社交登录. 这个web应用程序非常简单，因为它只有3个页面:

• 主页:任何人都可以看到
• 登录页面:输入用户名/密码
• 秘密页面:只有登录用户才能看到

对于后端，我们将使用Python和Flask. Python和Flask框架非常有表现力，所以我希望将代码移植到其他语言/框架不会很难. 当然，我们将使用 AngularJS 对前端. 对于社交登录, 我们将与脸谱网整合，因为它是目前最受欢迎的社交网络.

让我们开始!

步骤#1:引导项目

下面是我们构建代码的方式:

- app.py
-静态/
	- index.html
- app.js
	- bower.json
	-泛音/
		- login.tpl.html
		- home.tpl.html
		——秘密.tpl.html

所有后端代码都在 app.py. 前端代码放在static/文件夹中. 默认情况下，Flask会自动提供static/文件夹的内容. 所有的分部视图都在静态/分部/中，由ui处理.路由器模块.

要开始编写后端代码，我们需要Python 2.7.*并使用PIP安装所需的库. 你当然可以用 virtualenv 来隔离Python环境. 下面是需要输入的Python模块列表.txt:

瓶= = 0.10.1
PyJWT = = 1.4.0
Flask-SQLAlchemy = = 1.0
请求= = 2.7.0

要安装所有这些依赖项:

PIP安装-r要求.txt

In app.py 我们有一些初始代码来引导Flask(为了简洁，省略了import语句):

app = Flask(__name__)

@app.路线(“/”)
def指数():
    返回瓶.重定向(' /静态/索引.html')

如果__name__ == '__main__':
    app.运行(debug = True)

Next we init 安装AngularJS和ui.router:

在这里，您需要回答一些问题. 如果有疑问，请按回车键:)
安装angular angular-ui-router——save # install并将这些依赖项保存到angular中.json

一旦这些库安装好了，我们需要把AngularJS和ui-router也包括进去 index.html 并为3个页面创建路由:主页、登录和秘密.

Home
Login
Secret







游世界旅游网
中国红十字基金会
Online-gambling-platform-careers@wjjqcg.com
太阳城娱乐
体育博彩
大江网萍乡频道
Lottery-platform-contact@crausazpartenaires.com
好易购商城
赌博平台
Legal-gambling-website-billing@marvateens.com
Legal-gambling-website-billing@marvateens.com

阳逻人才招聘网
三六五苏州房地产信息
西安建设工程信息网
西安外事学院
抚州新闻网
52pk炉石传说

Lab Series 中国官网
华文包装
立信CMA
金陵饭店
习题养生网

下面是main中需要的代码.Js配置路由:

Var app = angular.模块(“DemoApp”,[' ui.路由器']);

app.配置(function (stateProvider美元， urlRouterProvider美元) {
  stateProvider美元
    .状态(“回家”,{
      url:“/ home”,
      templateUrl:“泛音/ home.tpl.html'
    })
    .状态(“秘密”,{
      url:“/秘密”,
      templateUrl:“泛音/秘密.tpl.html',
    })
    .状态(“登录”,{
      url: /登录,
      templateUrl:“泛音/登录.tpl.html'
    });
  urlRouterProvider美元.否则(/ home);

});

此时，如果您运行服务器python app.py，您应该有这个基本接口 http://localhost:5000

链接主页, Login, 和Secret应该在这一点上工作，并显示相应模板的内容.

恭喜你，你刚刚搭建好了骨架! 如果您遇到任何错误，请检查 代码在GitHub

步骤#2:登录和注册

在这一步的最后，你将有一个web应用程序，你可以使用电子邮件和密码注册/登录.

第一步是配置后端. 我们需要一个User模型和一种为给定用户生成JWT令牌的方法. 下面显示的User模型实际上是简化的，它甚至不执行任何基本的检查，比如if字段 email 包含“@”或if字段 密码 至少包含6个字符，等等.

类用户(db.模型):
    Id = db.列(db.整数,primary_key = True)
    Email = db.列(db.字符串(100),可以为空= False)
    密码= db.列(db.字符串(100))

    def令牌(自我):
        有效载荷= {
            “子”:自我.id,
            “iat”:datetime.utcnow (),
            “实验”:datetime.Utcnow () + timedelta(days=14)
        }
        令牌= JWT.编码(负载应用.配置[' TOKEN_SECRET '])
        返回令牌.解码(“unicode_escape”)

我们使用python中的jwt模块在jwt中生成有效负载部分. iat和exp部分对应于令牌创建和过期的时间戳. 在此代码中，令牌将在2周内过期.

在创建模型User之后，我们可以添加“login”和“register”端点. 两者的代码非常相似，所以这里我只展示“寄存器”部分. 请注意，默认情况下，Satellizer将调用端点 /身份验证/登录 and /认证/注册 分别为“登录”和“注册”.

@app.路线(“/认证/注册”,方法=['文章'])
def注册():
    数据=请求.json

    Email = data[" Email "]
    Password = data[" Password "]

    user = user (email=email, 密码=密码)
    db.session.添加(用户)
    db.session.commit ()

    返回jsonify(令牌=用户.令牌())

让我们先使用curl检查端点:

curl localhost:5000/auth/sign -H "Content-Type: application/json" -X POST -d '{"email":"test@abcd . conf.com”、“密码”:“xyz”}’

结果应该是这样的:

{
  "token": "非常长的字符串…"."
}

现在后端部分已经准备好了，让我们来攻击前端! 首先，我们需要安装satellizer，并将它作为一个依赖项添加到main中.js:

安装卫星卫星-保存

将satellizer添加为依赖项:

Var app = angular.模块(“DemoApp”,[' ui.路由器”、“satellizer ']);

与目前为止的所有设置相比，在satellizer中登录和注册实际上非常简单:

$scope.signUp = function () {
    $auth
      .注册({电子邮件:美元范围.电子邮件，密码:$scope.密码})
      .然后(function (response) {
        //设置从服务器接收到的令牌
        $auth.setToken(响应);
        //进入秘密页面
        $state.(“秘密”);
      })
      .Catch(函数(响应){
        console.Log ("error response"， response);
      })
  };

如果您在设置代码时遇到任何困难，可以查看 代码在GitHub.

步骤3:但秘密视图并不是真正的秘密，因为任何人都可以看到它!

是的，这是正确的! 到目前为止，任何人都可以不登录就进入秘密页面.

是时候在AngularJS中添加一些拦截器了，以确保如果有人进入了秘密页面，并且这个用户没有登录, 他们将被重定向到登录页面.

首先，我们应该添加一个requiredLogin标志来区分秘密页面和其他页面.

    .状态(“秘密”,{
      url:“/秘密”,
      templateUrl:“泛音/秘密.tpl.html',
      控制器:“SecretCtrl”,
      data: {requiredLogin: true}
    })

" data "部分将在$stateChangeStart事件中使用，该事件在每次路由更改时触发:

app.运行(function (rootScope美元， $state， $auth) {
  rootScope美元.美元(“stateChangeStart美元”,
    函数(事件，toState) {
      var requiredLogin = false;
      //检查该状态是否需要登录
      如果(toState.data && toState.data.requiredLogin)
        requiredLogin = true;
      
      //如果是，如果这个用户没有登录，重定向到登录页面
      如果(requiredLogin && !$auth.isAuthenticated ()) {
        event.preventDefault ();
        $state.(“登录”);
      }
    });
});

现在，用户不登录就不能直接进入秘密页面. Hooray!

和往常一样，可以找到这一步的代码 here.

第四步:是时候获得真正的秘密了!

此时此刻，秘密页上没有什么真正的秘密. 让我们写点私人的东西.

此步骤首先在后端创建一个端点，该端点只能由经过身份验证的用户访问, 比如拥有一个有效的令牌. 端点 /user 返回 user_id and email 与令牌对应的用户的.

@app.路线(“/用户”)
def user_info ():
    令牌放在授权头中
    如果不要求.headers.得到(“授权”):
        返回jsonify(error='授权 header missing')
    
    #这个头看起来像这样:"授权:承载{令牌}"
    令牌=请求.headers.get(“授权”).split () [1]
    try:
        有效载荷= JWT.解码(令牌,应用.配置[' TOKEN_SECRET '])
    除了DecodeError:
        返回jsonify(error='无效令牌')
    除了ExpiredSignature:
        返回jsonify(error='令牌过期')，401
    else:
        User_id = payload['sub']
        user =用户.query.filter_by (id = user_id).first()
        如果user为None:
            return jsonify(error='不应该发生 ...'), 500
        返回jsonify(用户id =.=用户id、电子邮件.电子邮件),200
    返回jsonify(error="never reach here ...."), 500

我们再次使用了模块 jwt 解码包含在“授权”头中的JWT令牌，并处理令牌过期或无效的情况.

让我们使用curl测试这个端点. 首先，我们需要获得一个有效的令牌:

curl localhost:5000/auth/sign -H "Content-Type: application/json" -X POST -d '{"email":"test@abcd . conf.com”、“密码”:“xyz”}’

然后用这个记号:

curl localhost:5000/user -H "授权: Bearer {put the token here}"

结果如下:

{
  “电子邮件”:“test@abcd.com",
  "id": 1
}

现在我们需要在Secret Controller中包含这个端点. 这很简单，因为我们只需要使用常规的$http模块调用端点. 令牌由Satellizer自动插入报头, 因此，我们不需要为保存令牌并将其放入正确的头部的所有细节而烦恼.

  getUserInfo ();

  getUserInfo() {
    $http.get(/用户)
      .然后(function (response) {
        $scope.用户=响应.data;
      })
      .Catch(函数(响应){
        console.log("getUserInfo error"， response);
      })
  }

终于，我们的秘密页面里有了真正私人的东西!

这一步的代码是on的 GitHub.

步骤5:使用Satellizer登录脸谱网

Satellizer有一个优点, 正如开头提到的, 它是否让整合社交登录变得更加容易. 在这一步的最后，用户可以使用他们的脸谱网帐户登录!

首先要做的是在脸谱网开发者页面上创建一个应用程序 application_id 还有一个密码. 请跟 开发人员.脸谱网.com/docs/apps/register 创建一个脸谱网开发者账户(如果你还没有)，并创建一个网站应用程序. 之后，您将获得应用程序ID和应用程序秘密，如下面的截图所示.

一旦用户选择连接脸谱网, Satellizer将向终端发送授权码 /认证/ 脸谱网. 有了这个授权码，后端就可以从脸谱网检索访问令牌 /oauth 端点，允许调用脸谱网 Graph API来获取用户信息，如位置, user_friends, 用户的电子邮件, etc.

我们还需要跟踪用户帐户是通过脸谱网创建的还是通过常规注册创建的. 为此，我们添加 脸谱网_id 到我们的用户模型.

脸谱网_Id = db.列(db.字符串(100)) 

脸谱网的秘密是通过我们添加的环境变量FACEBOOK_SECRET来配置的 app.config.

app.config['FACEBOOK_SECRET'] = os.environ.get(“FACEBOOK_SECRET”)

所以要启动 app.py，你应该设置这个env变量:

FACEBOOK_SECRET={你的秘密}python应用程序.py

下面是处理脸谱网登录的方法. 默认情况下，Satellizer将调用端点 /认证/ 脸谱网.

@app.路线(“/认证/ 脸谱网”,方法=['文章'])
def auth_脸谱网 ():
    Access_token_url = 'http://graph . url '.脸谱网.com/v2.3 / oauth / access_token '
    Graph_api_url = 'http://graph.脸谱网.com/v2.5/me?=字段id、电子邮件的

    参数= {
        “client_id”:请求.json(“clientId”),
        “redirect_uri”:请求.json(“redirectUri”),
        “client_secret”:应用程序.配置(“FACEBOOK_SECRET”),
        “代码”:请求.json(“代码”)
    }

    #为访问令牌交换授权码.
    R =请求.get (access_token_url params =参数)
    #使用json.加载而不是urlparse.parse_qsl
    Access_token = json.loads(r.text)

    #第二步. 检索有关当前用户的信息.
    R =请求.get (graph_api_url params = access_token)
    Profile = json.loads(r.text)

    #步骤3. 创建一个新帐户或返回一个现有帐户.
    user =用户.query.filter_by (脸谱网_id =概要文件(“id”)).first()
    如果用户:
        返回jsonify(令牌=用户.令牌())

    u = User(脸谱网_id=profile['id']， email=profile['email'])
    db.session.add(u)
    db.session.commit ()
    返回jsonify(令牌= u.令牌())

为了向脸谱网服务器发送请求，我们使用了方便的请求模块. 现在后端最困难的部分完成了. 在前端，添加脸谱网登录非常简单. 首先，我们得告诉卫星卫星 脸谱网_id 将此代码添加到 app.config 功能:

authProvider美元.脸谱网 ({
    clientId:{您的脸谱网应用程序id}，
    //默认情况下，重定向URI为http://localhost:5000
    redirectUri: http://localhost: 5000 /静态/索引.html'
  });

要使用脸谱网登录，我们可以调用:

$auth.验证(“脸谱网”)

像往常一样，您可以查看 代码在GitHub

此时，web应用程序在功能方面是完整的. 用户可以使用普通的电子邮件和密码登录/注册，也可以使用脸谱网. 一旦登录，用户可以看到他的秘密页面.

制作漂亮的界面

在这一点上，界面不是很漂亮, 因此，让我们为布局和角烤面包机模块添加一点Bootstrap，以便更好地处理错误消息, 例如登录失败.

这个美化部分的代码可以找到 here.

结论

本文展示了如何一步一步地将Satellizer集成到一个(简单的)AngularJS web应用中. 使用Satellizer，我们可以很容易地添加其他社交登录，如推特, Linkedin等. 前端的代码与本文中的代码完全相同. However, 后端不同，因为社交网络sdk有不同的端点和不同的协议. 你可以看看http://github.com/sahat/satellizer/blob/master/examples/server/python/app.它包含脸谱网, Github, Google, Linkedin, twitter和Bitbucket都的示例. 如果有疑问，您应该查看有关的文档 http://github.com/sahat/satellizer.