如何在注册前后追踪用户？¶
在本指南中，您将学习如何在用户注册前后追踪来自特定来源的用户。例如，了解通过您在博客文章或邮件营销活动中放置的注册链接，有多少人注册了您的应用。
前置条件¶
要跟随本指南操作，您需要具备以下条件：
- 一个免费的 Authany 账号。
- 在 Authany 管理台中创建一个应用，并记下该应用的配置信息。
- 一个使用您熟悉的语言或框架编写的客户端应用。
我们将构建什么¶
在本指南中，我们将构建一个具有以下功能的 Express 演示应用：
- 读取由您（开发者）定义的
sourceURL 参数。 - 使用 OAuth 2.0 的
state参数，将source参数的值发送给 Authany 授权服务器。 - 在用户完成授权（注册）后，读取返回的
state值，并将其记录到数据库或 Mixpanel 等分析系统中。
什么是 OAuth 2.0 State 参数？¶
OAuth 2.0 框架包含一个可选的 state 参数。state 参数的值可以是客户端应用（例如使用 Authany 进行用户身份验证的网页或移动应用）在发起授权请求之前定义的任意随机字符串或数字。简单来说，state 参数会作为 URL 查询参数添加到授权 URL 中。
授权服务器（Authany）在将用户代理重定向回客户端应用时，会附带相同的 state 参数值。因此，客户端应用可以获取返回的 state 值，以验证自己就是该授权请求的发起方。
我们将利用授权流程的这一特性，在用户注册前后对其进行追踪。
如何追踪通过特定来源注册的用户¶
以下步骤展示了如何构建一个能够在用户注册前后对其进行追踪的简单应用。
第 1 步：设置您的应用以使用 Authany¶
首先，创建一个新的项目目录并打开它。本指南使用的演示应用是一个简单的 Express 应用，并使用 Axios 发送 HTTP 请求。因此，请使用以下命令安装这两个软件包：
1. Express：
2. Axios：
接下来，在项目目录中创建一个新的 app.js 文件，然后将以下代码添加到该文件中：
const express = require('express');
const axios = require('axios');
const app = express();
const port = process.env.PORT || 3000;
const config = {
client: {
id: "CLIENT_ID",
secret: "CLIENT_SECRET",
redirect_url: "REDIRECT_URL"
},
auth: {
tokenHost: "AUTHGEAR_ENDPOINT",
tokenPath: '/oauth2/token',
authorizePath: '/oauth2/authorize',
scope: 'openid offline_access'
},
};
您可以从 Authany 管理台的 应用 部分获取正确的配置值（CLIENT_ID、CLIENT_SECRET、REDIRECT_URL 和 AUTHANY_ENDPOINT）。
第 2 步：向授权请求添加 State 参数¶
在这一步中，我们将在演示应用中实现一个 /login 路由。该路由将支持 source 查询参数，例如 /login?source=002。
将以下代码添加到 app.js 文件末尾，以实现 /login 路由：
app.get("/login", (req, res) => {
const url = new URL(`${config.auth.tokenHost}${config.auth.authorizePath}`);
url.searchParams.set('client_id', config.client.id);
url.searchParams.set('redirect_uri', config.client.redirect_url);
url.searchParams.set('response_type', 'code');
url.searchParams.set('scope', config.auth.scope);
if (req.query.source != null) {
url.searchParams.set('state', req.query.source);
}
res.redirect(url);
});
上述代码会检查发送到 /login 路由的 HTTP 请求中是否包含 source 参数。如果存在 source 参数，该参数的值将被添加到授权 URL 的 state 参数中。
以下是一个包含 source 参数的登录 URL 示例：
第 3 步：在授权后读取 State 的值¶
如前所述，无论您在授权 URL 的 state 参数中放入什么值，Authany 都会原样返回。在上一步中，我们从 /login 路由读取了 source 参数的值，并将其传递给 state 参数。在这一步中，我们将从重定向 URI 中读取 Authany 返回的 state 参数，获取我们最初传入的值（source）。
为此，我们将添加一个 / 路由来处理重定向 URI。将以下代码添加到 app.js 文件末尾，以实现该路由：
app.get("/", async (req, res) => {
if (req.query.code != null) {
const data = {
client_id: config.client.id,
client_secret: config.client.secret,
code: req.query.code,
grant_type: 'authorization_code',
response_type: 'code',
redirect_uri: config.client.redirect_url,
scope: config.auth.scope
};
const sourceFromState = req.query.state;
try {
const getToken = await axios.post(`
${config.auth.tokenHost}${config.auth.tokenPath}`,
data,
{
headers: { "Content-Type": "application/x-www-form-urlencoded" }
}
);
const accessToken = getToken.data.access_token;
res.send(`
<p>Access token: ${accessToken}, ${sourceFromState}</p>
`);
} catch (error) {
res.send("An error occurred! Login could not complete. Error data: " + error);
}
}
else {
res.send(`
<div style="max-width: 650px; margin: 16px auto; background-color: #EDEDED; padding: 16px;">
<p>Hi there!</p>
<p>This demo app shows you how to add user authentication to your Express app using Authgear</p>
<p>Checkout <a href="https://docs.authany.com/">docs.authgear.com</a> to learn more about adding Authgear to your apps.</p>
<a href="/login">Login</a>
</div>
`);
}
});
app.listen(port, () => {
console.log(`server started on port ${port}!`);
});
sourceFromState 常量保存了重定向 URI 中 state 参数的值。您可以将此值保存到数据库中，以追踪用户是否已通过带有 source 值的链接成功完成注册（该链接来自您最初的营销活动链接）。您也可以将此信息发送给 Mixpanel 等分析工具，以追踪用户和来源。
要运行该演示应用，请在终端中运行以下命令：
然后，在浏览器中打开 http://localhost:3000/login?source=002。您可以将 002 改为任意随机字符串，用来追踪某个来源或营销活动。另外，请务必在 Authany 管理台中将 http://localhost:3000 添加为该应用的重定向 URL。