java - 使用现有 API 的 FB/Google 客户端登录(Ionic)

Question

我的堆栈是:

• ionic 2
• Java Spring
• JWT 认证

并且我想在我的应用程序中使用相应的 cordova 插件实现一个社交登录按钮(Facebook、谷歌等)，用于登录用户并在我现有的自定义服务器端 API 上验证他并存储他/她的数据.我找不到任何关于如何执行此操作的好教程。

我希望我的用户使用随 secret 码保存在数据库中并能够从我的应用程序登录。

我在想一些事情:

(客户端)

FB.login(function(userDetailsAndToken) {
    myBackendAPI.socialLogin(userDetailsAndToken).then(function(user) {
        //Successfully logged in with Facebook!
        this.user = user;
    }
}

在后端(Java Spring):

@PostMapping("/social/account")
public ResponseEntity socialAccount(@Valid @RequestBody FacebookDTO facebookDTO) {
    validateSocialUser(facebookDTO);

    //if user exists return invalid etc.
    Optional<User> existingUser = userRepository.findOneByEmail(facebookDTO.getEmail());
    if (existingUser.isPresent()) {
        return ResponseEntity.badRequest();
    }

    //User doesn't exist. Proceed with login 
    //map from social to my User entity
    User user = socialMapper.toEntity(facebookDTO);

    userService
        .createUser(user.getLogin(), user.getPassword(),
            user.getFirstName(), user.getLastName(),
            user.getEmail().toLowerCase(), user.getImageUrl(),
            user.getLangKey());
    return new ResponseEntity<>(HttpStatus.CREATED);
}

这可能且安全吗？关于如何实现这一目标的任何好的资源/库或指南？

Answer 1

这是一个关于使用 FB 和 Google Auth 的示例演示，但我不是 Java 背景的，所以您只会找到客户端解决方案。

服务

让我们来实现登录功能的逻辑。在 oauth 文件夹中创建一个 oauth.service.ts 文件并在其中粘贴以下代码:

import { Injectable, Injector } from '@angular/core';
import { FacebookOauthProvider } from './facebook/facebook-oauth.provider';
import { IOathProvider } from './oauth.provider.interface';
import { GoogleOauthProvider } from './google/google-oauth.provider';
import { OAuthToken } from './models/oauth-token.model';
@Injectable()
export class OAuthService {
    private oauthTokenKey = 'oauthToken';
    private injector: Injector;
constructor(injector: Injector) {
        this.injector = injector;
    }
login(source: string): Promise {
        return this.getOAuthService(source).login().then(accessToken => {
            if (!accessToken) {
                return Promise.reject('No access token found');
            }
let oauthToken = {
                accessToken: accessToken,
                source: source
            };
            this.setOAuthToken(oauthToken);
            return oauthToken;
        });
    }
getOAuthService(source?: string): IOathProvider {
        source = source || this.getOAuthToken().source;
        switch (source) {
            case 'facebook':
                return this.injector.get(FacebookOauthProvider);
            case 'google':
                return this.injector.get(GoogleOauthProvider);
            default:
                throw new Error(`Source '${source}' is not valid`);
        }
    }
setOAuthToken(token: OAuthToken) {
        localStorage.setItem(this.oauthTokenKey, JSON.stringify(token));
    }
getOAuthToken(): OAuthToken {
        let token = localStorage.getItem(this.oauthTokenKey);
        return token ? JSON.parse(token) : null;
    }
}

身份验证提供程序和 token 接口(interface)正如我们已经提到的，IOathProvider 应该包含一个 login() 函数。因此，我们应该设置以下接口(interface)作为 IOathProvider 对象的抽象类型/模型。在 oauth 文件夹中创建一个 oauth.provider.interface.ts 文件，并在其中包含以下行:

export interface IOathProvider {
    login(): Promise;
}

Facebook 和 Google 身份验证服务

下一步，我们应该为我们的应用程序拥有的每个身份验证提供程序实现服务，即 FacebookOauthProvider 和 GoogleOauthProvider。

安装依赖

此时 ng2-cordova-oauth 库就派上用场了。我们可以通过执行命令来安装它:npm install ng2-cordova-oauth --save

此外，我们的应用依赖于 Cordova InAppBrowser 插件。我们将安装它:

ionic 插件添加 cordova-plugin-inappbrowser

不要忘记将 cordova-plugin-inappbrowser 也包含在您的 package.json 文件中，这样它就可以在您从头开始安装项目的任何时候与其他插件一起安装。

实现 Facebook 和 Google 身份验证提供程序

让我们在 oauth/facebook/路径 下创建 facebook-oauth.provider.ts 文件。在此文件中，将代码包含在片段中:

 import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import { IOathProvider } from '../oauth.provider.interface';
    import { CordovaOauth } from 'ng2-cordova-oauth/oauth';
    import { Facebook } from 'ng2-cordova-oauth/provider/facebook';
    import { Config } from '../../../config';
    interface ILoginResponse {
        access_token: string;
    }
    @Injectable()
    export class FacebookOauthProvider implements IOathProvider {
        private cordovaOauth: CordovaOauth;
        private http: Http;
        private config: Config;
        private facebook: Facebook;
    constructor(http: Http, config: Config) {
            this.http = http;
            this.config = config;
            this.facebook = new Facebook({ clientId: config.facebook.appId, appScope: config.facebook.scope });
            this.cordovaOauth = new CordovaOauth();
        }
    login(): Promise {
            return this.cordovaOauth.login(this.facebook)
                .then((x: ILoginResponse) => x.access_token);
        }
    }

同样，使用 ng2-cordova-oauth 库 提供的 CordovaOauth 对象，我们将使用自己的 Google 身份验证提供程序 login() 函数。但是，我们在这里从 Config 传递了另一个 clientId，它对应于我们使用 Google Developer Console 配置的应用程序。因此，创建一个 google-oauth.provider.ts 文件并粘贴以下行:

import { Injectable } from '@angular/core';
import { IOathProvider } from '../oauth.provider.interface';
import { OAuthProfile } from '../models/oauth-profile.model';
import { CordovaOauth } from 'ng2-cordova-oauth/oauth';
import { Google } from 'ng2-cordova-oauth/provider/google';
import { Config } from '../../../config';
import { Http } from '@angular/http';
interface ILoginResponse {
    access_token: string;
}
@Injectable()
export class GoogleOauthProvider implements IOathProvider {
    private http: Http;
    private config: Config;
    private cordovaOauth: CordovaOauth;
    private google: Google;
constructor(http: Http, config: Config) {
        this.http = http;
        this.config = config;
        this.google = new Google({ clientId: config.google.appId, appScope: config.google.scope });
        this.cordovaOauth = new CordovaOauth();
    }
login(): Promise {
        return this.cordovaOauth.login(this.google).then((x: ILoginResponse) => x.access_token);
    }
getProfile(accessToken: string): Promise {
        let query = `access_token=${accessToken}`;
        let url = `${this.config.google.apiUrl}userinfo?${query}`;
return this.http.get(url)
            .map(x => x.json())
            .map(x => {
                let name = x.name.split(' ');
                return {
                    firstName: name[0],
                    lastName: name[1],
                    email: x.email,
                    provider: 'google'
                };
            })
            .toPromise();
    }
}

全部归功于 this文章，你可以找到Working Code在 Github 上。我没有涵盖整个教程，只有该教程的部分(Google 和 Facebook)。即我们需要安装什么插件以及如何使用 TypeScript ，如果您还需要那么您可以引用该教程