通过 Angular 应用程序使用 fb 登录 - Javascript

本文将介绍如何在 Angular 应用程序中使用 Facebook 登录功能。我们将使用 Facebook 的 JavaScript SDK 来实现这一点。

步骤 1: 创建 Facebook 应用程序

首先，您需要在 Facebook 开发者网站上创建一个应用程序。如果您尚未拥有 Facebook 开发者账户，则需要先创建一个。

创建应用程序

在您的开发者账户中，转到 "我的应用程序" 页面，然后单击 "新增应用程序" 按钮。选择 "网站" 应用程序类型，输入您的应用程序名称和联系人邮箱。

添加产品

在左侧菜单中，单击 "添加产品"。选择 "Facebook 登录"。然后，单击 "设置" 按钮，将 "有效重定向 URI" 添加为您的应用程序URI。

获取应用程序 ID 和应用程序密钥

在应用程序设置页面上，您将看到您的应用程序 ID 和应用程序密钥。请记下这些值，稍后将需要使用它们。

步骤 2: 安装 Facebook JavaScript SDK

使用 npm 安装 Facebook JavaScript SDK：

npm install --save @types/facebook-js-sdk

步骤 3: 创建一个 FacebookService

我们将创建一个名为 FacebookService 的服务来管理 Facebook SDK 的配置和状态。

import { Injectable } from '@angular/core';

declare var FB: any;

@Injectable({
  providedIn: 'root'
})
export class FacebookService {

  private fbInitialized: boolean = false;

  constructor() {
    if (!this.fbInitialized) {
      this.fbInitialized = true;
      this.initFacebookSdk();
    }
  }

  private initFacebookSdk() {
    // 初始化 Facebook SDK
    FB.init({
      appId      : 'your-app-id',
      cookie     : true,
      xfbml      : true,
      version    : 'v11.0'
    });
  }

  public login(): Promise<any> {
    // 构建授权URL
    const authUrl = this.getLoginUrl();

    // 打开授权窗口
    const authWindow = window.open(authUrl, '_blank', 'height=600,width=600');

    return new Promise((resolve, reject) => {
      const intervalId = setInterval(() => {
        if (authWindow.closed) {
          clearInterval(intervalId);
          this.checkLoginStatus().then((response) => {
            resolve(response);
          }).catch((error) => {
            reject(error);
          });
        }
      }, 1000);
    });
  }

  private getLoginUrl(): string {
    const uri = encodeURI(window.location.href);
    return `https://www.facebook.com/v11.0/dialog/oauth?client_id=your-app-id&redirect_uri=${uri}&scope=email`;
  }

  private checkLoginStatus(): Promise<any> {
    return new Promise((resolve, reject) => {
      FB.getLoginStatus((response) => {
        if (response.status === 'connected') {
          const accessToken = response.authResponse.accessToken;
          this.getUserInfo(accessToken).then((userInfo) => {
            resolve(userInfo);
          }).catch((error) => {
            reject(error);
          });
        } else {
          reject(response.status);
        }
      });
    });
  }

  private getUserInfo(accessToken: string): Promise<any> {
    return new Promise((resolve, reject) => {
      FB.api('/me?fields=id,name,email,picture', (userInfo) => {
        if (userInfo.error) {
          reject(userInfo.error);
        } else {
          userInfo.accessToken = accessToken;
          resolve(userInfo);
        }
      });
    });
  }
}

步骤 4: 在组件中使用 FacebookService

现在我们可以在组件中使用我们的新服务了。以下是具有 "Facebook 登录" 按钮的示例组件：

import { Component } from '@angular/core';
import { FacebookService } from './facebook.service';

@Component({
  selector: 'app-facebook-login',
  template: `
    <button class="btn btn-primary" (click)="loginWithFacebook()">使用 Facebook 登录</button>
  `
})
export class FacebookLoginComponent {

  constructor(private facebookService: FacebookService) {}

  loginWithFacebook() {
    this.facebookService.login().then((response) => {
      console.log(response);
    }).catch((error) => {
      console.error(error);
    });
  }
}

在这个组件类中，我们只需要注入 FacebookService 并在按钮的点击事件中调用 FacebookService.login()。

总结

现在您已经了解了如何使用 Facebook JavaScript SDK 在 Angular 应用程序中实现 Facebook 登录功能。虽然这只是一个简单的示例，但您可以使用此代码为您的特定应用程序定制解决方案。

参考

• Facebook for Developers
• Angular