使用 OpenID Connect 和 NGINX Plus 对现有applications进行用户身份验证

利亚姆·克里利

2016 年 9 月 7 日发布

使用 JWT 支持为现有应用提供 SSO

[编辑器-这篇文章介绍了如何将 NGINX Plus 与支持隐式流程身份验证的 OpenID Connect 提供程序结合使用。这些信息在技术上是正确的，但由于我们的参考实现的更新，某些操作（例如使用cron获取公钥）不再需要。有关当前实现，请参阅我们的GitHub repo 。

在NGINX Plus R15及更高版本中，您还可以使用 NGINX Plus 作为 OpenID Connect授权码流中的依赖方。

OAuth 2.0 极大地改变了网站和应用身份验证的灵活性和用户体验。但是，尽管名称如此， OAuth 2.0 规范却很少提及验证最终用户身份，也没有提及单点登录 (SSO)。这就是OpenID Connect 的作用所在——它本质上是 OAuth 2.0 访问令牌中携带身份信息的缺失部分。

OpenID Connect 身份令牌符合JSON Web Token (JWT) 规范。 JWT（发音为“jot”）令牌紧凑、易于传递，并提供了用于描述身份信息的通用核心模式。 JWT 的优点在于它们可以应用于几乎任何身份用例，从验证 API 客户端到为企业应用提供 SSO。事实上，许多使用 Google Apps 的组织可以利用 Google 作为身份提供商，为其企业应用提供 SSO 。也就是说，使用 OpenID Connect 和 JWT 并不妨碍它们用于对现有 Web应用进行身份验证或提供 SSO。

NGINX Plus R10及更高版本包含原生 JWT 支持，使 NGINX Plus 能够验证令牌并以经过身份验证的用户的身份装饰上游请求，以便应用可以轻松使用。在这篇博文中，我们演示了如何使用 NGINX Plus 中的原生 JWT 支持为现有应用启用 SSO，而无需对应用本身进行任何更改。我们使用 Google 作为身份提供者，并使用一个简单的网站来代表该应用。端到端流程如下：

NGINX Plus 使用 OAuth 2.0 和 OpenID Connect 验证用户身份，实现基于 Google 的 SSO

为您的 Webapplication启用 OpenID Connect

我们的示例有两个组件：NGINX Plus 配置和 HTML 登录页面。

NGINX Plus 配置

用于验证 JWT 的 NGINX Plus 配置非常简单。

服务器 { listen 80;
root /var/www/public_html;

location /private/ {
auth_jwt "Google 帐户" token=$cookie_auth_token;
auth_jwt_key_file /etc/nginx/google_certs.jwk;
}
}

位置块指定任何以/private/开头的 URL 请求都必须经过身份验证。 auth_jwt指令定义将返回的身份验证领域（以及401) 如果身份验证不成功，NGINX Plus 可以在请求中找到 JWT。在这种情况下，它期望在名为auth_token的 cookie 中找到令牌。默认情况下，NGINX Plus 期望客户端将 JWT 作为Bearer Token呈现，使用Authorization标头，就像AJAX应用和 API 客户端一样，但它也可以从其他 HTTP 标头、查询字符串参数或 cookie 中获取 JWT，如本例所示。

auth_jwt_key_file指令告诉 NGINX 如何验证 JWT 的签名元素。签名验证可确保 JWT 由 Google 颁发且未被修改。 Google发布其公钥并定期更新。要维护一组最新的密钥，请使用cron(8)每小时获取它们，如该示例crontab条目所示。

0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk

为了使这个例子简单明了，我们没有构建整个应用。相反，我们使用以下基本 HTML 来创建登录页面。 HTML 文件名为/var/www/public_html/index.html （这与我们在 NGINX Plus 配置中定义的根路径相匹配）。

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>NGINX OpenID Connect 演示</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" 
content="客戶端編號.apps.googleusercontent.com">
<script src="/js.cookie.js"></script>
</head>
<body>
<h2>NGINX OpenID Connect 演示</h2>
<hr/>
<h3>使用 Google 帐户登录，然后访问<a href="/private/">私人区域</a>。</h3>
<table><tr><td>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></td>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
Cookies.set('auth_token', googleUser.getAuthResponse().id_token);
document.getElementById('google_signout').innerHTML = '<a href="#" onclick="signOut();"><img src="' + profile.getImageUrl() + '" width=32 height=32>退出</a>';
};
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
Cookies.remove('auth_token');
document.getElementById('google_signout').innerHTML = '';
});
}
</script>
<td><div id="google_signout"></div></td>
</tr></table>
<hr/>
</body>
</html>

我们在块中突出显示了两个关键依赖关系。

<meta name="google‑signin‑client_id"> 标签 – 我们正在使用 Google 的 OAuth 2.0 JavaScript API 执行 OAuth 2.0 最终用户同意和身份验证流程。这为我们提供了登录按钮并可以检测我们是否已登录。为了让我们的网站能够通过 Google 的身份验证，我们需要创建一个 OAuth 2.0 客户端 ID，并将其作为此标签的内容属性提供，以替换客户端 ID占位符。有关创建新的 OAuth 2.0 客户端 ID 的说明，请参阅本文底部的附录。
<script src="/js.cookie.js"> 标签——我们需要一个 cookie 解析器，它可以从 OAuth 2.0 访问令牌中提取身份令牌并创建一个要发送到网站的 cookie。 Cookies.set行使用包含在该标签中的JavaScript Cookie库实现了这一点。

有了这些部分，我们现在有一个带有 Google 登录机制的公共主页和一个受 NGINX Plus 保护的私人区域。请注意，我们没有为我们的私人区域创建任何内容，因此404当我们尝试访问它时，预计会出现错误。

进一步阅读

有关高级 JWT 功能的详细信息，请参阅使用 JWT 和 NGINX Plus 对 API 客户端进行身份验证。它解释了如何使用从 JWT 获取的用户身份信息代理经过身份验证的请求、记录 JWT 声明以及支持多个身份提供者。

要了解 NGINX Plus 中的原生 JWT 支持，请立即开始30 天免费试用或联系我们。

附录 - 创建 Google OAuth 2.0 客户端 ID

[编辑——我们已尽一切努力在发布时准确地呈现 Google API 的 GUI，但 GUI 是高度动态的，菜单选项和位置可能会发生变化。使用这些说明作为参考，并根据需要使其适应当前的 GUI。]

通过https://console.developers.google.com/apis/dashboard访问 Google API 信息中心。

打开的页面取决于您使用 Google API 的历史记录。您可能需要创建一个帐户、接受使用条款并执行这些说明中未显示的其他步骤。

以下屏幕截图显示了仪表板的左上角。单击Google API徽标右侧的字词（如果您之前创建过项目，则可能会显示其名称而不是单词Project ）。选择创建项目。
创建一个新项目。这里我们的新项目名为NGINX OpenID 。单击“创建”按钮后，可能需要几秒钟才会出现通知，表明您的项目已创建。
为您的项目启用 Google+ API。它提供 OAuth 2.0 身份验证和身份服务。

（如果 API 管理器仪表板尚未出现在窗口主部分，请单击屏幕左侧导航区域中的“仪表板” 。）

启用 Google+ API 的第一步是单击启用 API按钮。
单击Google+ API （在社交 API部分）。
单击启用按钮。
要为您的项目创建凭证，请单击屏幕左侧导航区域中的“凭证” ，然后单击“创建凭证”按钮。

在下拉菜单中选择OAuth 客户端 ID 。
选择Web应用单选按钮。在授权的 JavaScript 来源字段中，指定安装 NGINX Plus 的主机的 URL 以及在为您的 Web应用启用 OpenID Connect中作为listen指令参数指定的端口号（例如， mydomain.example.com:80 ）。此示例使用 localhost，但您的输入需要是实际 NGINX Plus 实例的主机名和端口。

单击“创建”按钮（您可能需要多次单击该按钮才能开始创建过程）。
OAuth 客户端窗口将弹出以报告您的客户端 ID 和客户端密钥。将客户端 ID 复制到 内容 的属性 <meta name="google-signin-client_id"> 标签（替换突出显示的 客戶端編號 占位符如上所示）。您不需要客户端机密。
在主凭证屏幕上，单击OAuth 同意屏幕。提供您的电子邮件地址和产品名称（其他所有字段均为可选）。