路由器链接@click - Html

在 Web 开发中，为了方便管理和强制控制访问，我们经常需要在应用中进行鉴权。而鉴权的一种常见方式就是使用 OAuth2。在 OAuth2 中，授权服务器会返回一个描 述了授权过程的 URL，我们需要跳转到该 URL 进行授权，然后会重定向回我们的应用，携带授权信息。此时，我们需要在回调函数里处理拿到的授权信息，并进行后续操作。

当我们使用路由器链接@click 和 HTML 时，我们有两种方法来实现上述的 OAuth2 授权过程：使用 <a> 标签和 JavaScript。

使用 <a> 标签

使用 <a> 标签进行授权，我们需要在模板中使用以下代码：

<a href="{{ authorizationUrl }}">Authorize with OAuth2</a>

这里的 authorizationUrl 是授权服务器返回的 URL，我们可以将其通过后端渲染渲染到模板中。用户点击该链接时，浏览器会进行跳转，然后授权服务器会将用户重定向回我们的应用。

我们需要在路由器中定义一个回调函数，用于处理后续的授权信息。该函数应该在用户授权成功后被调用，这一步可以根据授权服务器的文档进行配置。

from flask import Flask, request

app = Flask(__name__)

@app.route('/callback')
def callback():
    code = request.args.get('code')
    # Code 换 Token，获取用户信息等后续操作

在用户授权成功后，授权服务器会重定向回我们的应用的 /callback 路径，并带上授权信息作为参数。我们可以使用 Flask 的 request 模块来获取这些参数，然后进行后续操作。

使用 JavaScript

除了使用 <a> 标签进行授权，我们也可以使用 JavaScript 来实现。这样可以在页面上添加一个按钮，用户点击后触发 JavaScript 函数，实现授权过程。

在页面的 HTML 代码中，我们可以添加一个按钮：

<button onclick="authorize()">Authorize with OAuth2</button>

接下来，我们需要实现 authorize 函数。在该函数中，我们使用 JavaScript 的 window.open 函数，打开授权服务器返回的 URL：

function authorize() {
    var authorizationUrl = "http://auth-server-url.com/oauth2/authorize";
    var clientId = "my-client-id";
    var redirectUri = "http://my-app-url.com/callback";
    var scope = "openid profile email";

    var url = authorizationUrl +
        "?client_id=" + clientId +
        "&redirect_uri=" + redirectUri +
        "&scope=" + scope +
        "&response_type=code";

    var width = 500;
    var height = 500;
    var left = (window.screen.width / 2) - (width / 2);
    var top = (window.screen.height / 2) - (height / 2);

    window.open(url, "OAuth2 Authorization", "width=" + width + ",height=" + height + ",top=" + top + ",left=" + left);
}

在调用 window.open 函数时，我们传入了一些参数，用于设置弹出窗口的大小和位置等属性。在用户完成授权后，授权服务器会重定向回我们的应用的 /callback 路径，并带上授权信息作为参数。在这个回调函数中，我们同样可以使用 Flask 的 request 模块来获取这些参数。

以上就是使用路由器链接@click 和 HTML 实现 OAuth2 授权过程的两种方式。根据实际情况，可以选择使用其中一种或结合使用。