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

Var app = angular.模块(“DemoApp”,[' ui.路由器']);\n\napp.配置(function (stateProvider美元， urlRouterProvider美元) {\n  stateProvider美元\n    .状态(“回家”,{\n      url:“/ home”,\n      templateUrl:“泛音/ home.tpl.html的\n    })\n    .状态(“秘密”,{\n      url:“/秘密”,\n      templateUrl:“泛音/秘密.tpl.html的,\n    })\n    .状态(“登录”,{\n      url: /登录,\n      templateUrl:“泛音/登录.tpl.html的\n    });\n  urlRouterProvider美元.否则(/ home);\n\n});\n

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

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

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

步骤#2:登录和注册

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

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

类用户(db.模型):\n    Id = db.列(db.整数,primary_key = True)\n    Email = db.列(db.字符串(100),可以为空= False)\n    密码= db.列(db.字符串(100))\n\n    def令牌(自我):\n        有效载荷= {\n            “子”:自我.id,\n            “iat”:datetime.utcnow (),\n            “实验”:datetime.Utcnow () + timedelta(days=14)\n        }\n        令牌= JWT.编码(负载应用.配置[' TOKEN_SECRET '])\n        返回令牌.解码(“unicode_escape”)\n

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

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

@app.路线(“/认证/注册”,方法=['文章'])\ndef注册():\n    数据=请求.json\n\n    email = data[\"email\"]\n    密码 = data[\"密码\"]\n\n    user = user (email=email, 密码=密码)\n    db.会话.添加(用户)\n    db.会话.commit ()\n\n    返回jsonify(令牌=用户.令牌())\n

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

curl localhost:5000/认证/注册 -H \"Content-Type: application/json\" -X POST -d '{\"email\":\"test@abcd.com\",\"密码\":\"xyz\"}'\n

结果应该是这样的:

{\n  \"token\": \"very long string….\"\n}\n

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

安装卫星卫星-保存\n

将satellizer添加为依赖项:

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

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

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

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

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

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

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

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

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

" data "部分将在美元的国家ChangeStart事件中使用，该事件在每次路由更改时触发:

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

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

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

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

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

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

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

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

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

curl localhost:5000/认证/注册 -H \"Content-Type: application/json\" -X POST -d '{\"email\":\"test@abcd.com\",\"密码\":\"xyz\"}'\n

然后用这个记号:

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

结果如下:

{\n  \"email\": \"test@abcd.com\",\n  \"id\": 1\n}\n

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

  getUserInfo ();\n\n  getUserInfo() {\n    $http.get(/用户)\n      .然后(function (response) {\n        美元的范围.用户=响应.data;\n      })\n      .Catch(函数(响应){\n        控制台.log(\"getUserInfo error\", response);\n      })\n  }\n

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

这一步的代码是on的 GitHub.

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

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

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

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

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

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

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

app.配置['FACEBOOK_SECRET'] = os.环境.get(“FACEBOOK_SECRET”)\n

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

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

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

@app.路线(“/认证/ 脸谱网”,方法=['文章'])\ndef auth_脸谱网 ():\n    Access_token_url = 'http://graph . url '.脸谱网.com/v2.3 / oauth / access_token '\n    Graph_api_url = 'http://graph.脸谱网.com/v2.5/me?=字段id、电子邮件的\n\n    参数= {\n        “client_id”:请求.json(“clientId”),\n        “redirect_uri”:请求.json(“redirectUri”),\n        “client_secret”:应用程序.配置(“FACEBOOK_SECRET”),\n        “代码”:请求.json(“代码”)\n    }\n\n    #为访问令牌交换授权码.\n    R =请求.get (access_token_url params =参数)\n    #使用json.加载而不是urlparse.parse_qsl\n    Access_token = json.负载(右.文本)\n\n    #第二步. 检索有关当前用户的信息.\n    R =请求.get (graph_api_url params = access_token)\n    Profile = json.负载(右.文本)\n\n    #步骤3. 创建一个新帐户或返回一个现有帐户.\n    user =用户.查询.filter_by (脸谱网_id =概要文件(“id”)).第()\n    如果用户:\n        返回jsonify(令牌=用户.令牌())\n\n    u = User(脸谱网_id=profile['id']， email=profile['email'])\n    db.会话.添加(u)\n    db.会话.commit ()\n    返回jsonify(令牌= u.令牌())\n

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

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

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

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

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

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

制作漂亮的界面

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

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

结论

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