如何在Angular中基于OAuth2实现密码修改跳转回调流程？

一、Angular 端处理 #

1. 配置回调地址 #

在项目环境配置文件（如environment.ts）中定义密码修改完成后的回调URL，需确保该地址已加入AuthServer的允许回调列表：

export const environment = {
  // 其他配置项...
  passwordChangeRedirectUri: 'https://your-angular-app.com/password-change-callback'
};

2. 实现跳转逻辑 #

在对应组件中添加跳转方法，点击修改密码链接时直接跳转到AuthServer的密码修改页面，同时携带回调地址参数：

// 组件类代码
goToPasswordChange() {
  const encodedRedirectUri = encodeURIComponent(environment.passwordChangeRedirectUri);
  // 拼接AuthServer密码修改页面地址与回调参数
  window.location.href = `https://your-auth-server.com/password-change?redirect_uri=${encodedRedirectUri}`;
}

模板中添加触发元素：

<a (click)="goToPasswordChange()">修改密码</a>

3. 处理回调页面 #

创建回调组件（如PasswordChangeCallbackComponent），接收AuthServer返回的状态并给用户反馈：

// password-change-callback.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: `
    <div *ngIf="isSuccess">密码修改成功！</div>
    <div *ngIf="!isSuccess">密码修改失败，请重试。</div>
  `
})
export class PasswordChangeCallbackComponent implements OnInit {
  isSuccess = false;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.isSuccess = params['status'] === 'success';
      // 可选：密码修改后旧令牌可能失效，可触发令牌刷新
      // this.oauthService.refreshToken();
    });
  }
}

在路由配置中添加该组件的路由规则：

// app-routing.module.ts
import { PasswordChangeCallbackComponent } from './password-change-callback.component';

const routes: Routes = [
  // 其他路由...
  { path: 'password-change-callback', component: PasswordChangeCallbackComponent }
];

二、AuthServer（PHP）端处理 #

1. 验证用户身份 #

用户跳转到密码修改页面时，先校验是否已登录（可通过session或令牌验证）：

// password-change.php
session_start();
// 检查用户登录状态（根据你的AuthServer登录逻辑调整）
if (!isset($_SESSION['user_id'])) {
    header('Location: /login');
    exit;
}

// 获取并校验回调地址
$redirectUri = isset($_GET['redirect_uri']) ? urldecode($_GET['redirect_uri']) : '';
$allowedUris = ['https://your-angular-app.com/password-change-callback'];
// 非法回调地址替换为默认值
if (!in_array($redirectUri, $allowedUris)) {
    $redirectUri = $allowedUris[0];
}

2. 处理密码修改请求 #

编写表单提交逻辑，更新用户密码后跳转回Angular回调地址：

// password-change.php 处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $newPassword = $_POST['new_password'];
    $userId = $_SESSION['user_id'];
    
    // 执行密码更新（示例：哈希后存入数据库）
    $passwordHash = password_hash($newPassword, PASSWORD_DEFAULT);
    $success = updateUserPassword($userId, $passwordHash); // 自行实现数据库更新逻辑
    
    // 携带状态跳转回Angular
    $status = $success ? 'success' : 'error';
    header("Location: {$redirectUri}?status={$status}");
    exit;
}

对应的HTML表单：

<form method="POST">
    <input type="password" name="new_password" required placeholder="请输入新密码">
    <button type="submit">确认修改</button>
</form>

3. 可选：失效旧令牌 #

为提升安全性，密码修改成功后可标记用户所有旧令牌为无效：

// 密码修改成功后调用该方法，失效用户的旧access_token与refresh_token
invalidateUserTokens($userId); // 自行实现令牌失效逻辑

三、关键注意事项 #

• 回调地址校验：AuthServer必须严格校验redirect_uri是否在允许列表内，防止恶意跳转。
• 身份校验：密码修改页面必须确保用户已完成身份验证，禁止未授权访问。
• 令牌刷新：密码修改后旧令牌可能失效，Angular端可在回调后主动刷新令牌获取新的有效凭证。

内容的提问来源于stack exchange，提问作者Fadly Dzil