Fatal编程技术网
  • laravel/
  • Laravel 社交登录，角度5，流明5.6

Laravel 社交登录，角度5，流明5.6

laravel

Laravel 社交登录，角度5，流明5.6,laravel,angular5,social-authentication,lumen-5.5,Laravel,Angular5,Social Authentication,Lumen 5.5,我正在尝试使用angular 5作为前端，lumen 5.6作为后端实现社交登录 我正在使用带有流明的JWT认证系统。 所以，在这种情况下，我很困惑应该如何实现社交登录系统 通过我的研究，我找到了这些可以做这项工作的库，但我不确定如何处理从前端（角度）到后端（流明）的过程 但由于我还没有找到任何关于使用Angular 5的卫星的文档，所以我选择使用另一个 我读过这篇文章，但我仍然不清楚从前端到后端的过程。 有任何解释性帮助吗？所以我在Angular 5中使用社交登录的方式是使用一个名为 “an

我正在尝试使用angular 5作为前端，lumen 5.6作为后端实现社交登录

我正在使用带有流明的JWT认证系统。 所以，在这种情况下，我很困惑应该如何实现社交登录系统

通过我的研究，我找到了这些可以做这项工作的库，但我不确定如何处理从前端（角度）到后端（流明）的过程

但由于我还没有找到任何关于使用Angular 5的卫星的文档，所以我选择使用另一个

我读过这篇文章，但我仍然不清楚从前端到后端的过程。

有任何解释性帮助吗？

所以我在Angular 5中使用社交登录的方式是使用一个名为

“angular5社交登录”：“^1.0.9”，

因此，将其添加到您的
package.json
文件中

将其导入
app.module.ts

export function getAuthServiceConfigs() {
  const config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider('') // Left as i dont use it
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider('YOUR-API-TOKEN.apps.googleusercontent.com')
        },
      ]
  );
  return config;
}

imports: [
    HttpClientModule,
    AppRoutingModule,
    ...
    SocialLoginModule, // One we need to add
  ],

providers: [
    YourServices,
    ...
    ApiAuthService,
    {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
    },
    LoggedInGuard,
],

从“angular5社交登录”导入{SocialWinModule、AuthServiceConfig、GoogleLoginProvider、FacebookLoginProvider}

在
app.module.ts


export function getAuthServiceConfigs() {
  const config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider('') // Left as i dont use it
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider('YOUR-API-TOKEN.apps.googleusercontent.com')
        },
      ]
  );
  return config;
}



imports: [
    HttpClientModule,
    AppRoutingModule,
    ...
    SocialLoginModule, // One we need to add
  ],



providers: [
    YourServices,
    ...
    ApiAuthService,
    {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
    },
    LoggedInGuard,
],


将其添加到
app.module.ts


export function getAuthServiceConfigs() {
  const config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider('') // Left as i dont use it
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider('YOUR-API-TOKEN.apps.googleusercontent.com')
        },
      ]
  );
  return config;
}



imports: [
    HttpClientModule,
    AppRoutingModule,
    ...
    SocialLoginModule, // One we need to add
  ],



providers: [
    YourServices,
    ...
    ApiAuthService,
    {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
    },
    LoggedInGuard,
],


然后在
app.module.ts


export function getAuthServiceConfigs() {
  const config = new AuthServiceConfig(
      [
        {
          id: FacebookLoginProvider.PROVIDER_ID,
          provider: new FacebookLoginProvider('') // Left as i dont use it
        },
        {
          id: GoogleLoginProvider.PROVIDER_ID,
          provider: new GoogleLoginProvider('YOUR-API-TOKEN.apps.googleusercontent.com')
        },
      ]
  );
  return config;
}



imports: [
    HttpClientModule,
    AppRoutingModule,
    ...
    SocialLoginModule, // One we need to add
  ],



providers: [
    YourServices,
    ...
    ApiAuthService,
    {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
    },
    LoggedInGuard,
],


正如您所看到的，我有一个
LoggedInGuard
和一个
ApiAuthService
这些都是身份验证和检查您登录的

这就是安装和设置的软件包

现在在
api auth.service.ts的内部添加此函数


socialSignIn(userData) {
    const formData = new FormData();
      formData.append('email', userData.email);
      formData.append('name', userData.name);
      formData.append('provider', userData.provider);
      formData.append('id', userData.id);
      formData.append('idToken', userData.idToken);
      formData.append('token', userData.token);
      formData.append('image', userData.image);
    return this._http.post(
      environment.apiUrl + '/auth/social-signin/',
      formData,
      {
        headers: new Headers({
          'Authorization': 'Bearer ' + userData.idToken
        })
      }
    );
  }



import { AuthService, FacebookLoginProvider, GoogleLoginProvider, LinkedinLoginProvider } from 'angular5-social-login';
import { ApiAuthService } from '../../../../services/api-auth.service';
import { TokenService } from '../../../../services/token.service';


public socialSignIn(socialPlatform: string) {
    this.loading = true;
    let socialPlatformProvider;
    if (socialPlatform === 'facebook') {
      socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
    } else if (socialPlatform === 'google') {
      socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
    } else if (socialPlatform === 'linkedin') {
      socialPlatformProvider = LinkedinLoginProvider.PROVIDER_ID;
    }

    this.socialAuthService.signIn(socialPlatformProvider).then(
      (userData) => {
        this._apiAuthService.socialSignIn(userData)
        .map( data => {
          return data.json();
        })
        .subscribe(
          token => {
            this._tokenService.setAccessToken(token.access_token);
          },
          error => {
            this.invalidLogin = true;
            this.loading = false;
          },
          () => {
            this.loading = false;
            this.closeSignIn.emit('out');
            // this._router.navigate(['/profile']);
          }
        );
      }
    );
  }


现在在您的登录组件中，将其添加到HTML中


<div (click)="socialSignIn('google')" class="c2a_btn large google">
    Log in with google 
</div>


现在这只是后端的前端。我用的是拉威尔5.6

但是我做了一个这样的函数


public function socialSignIn(Request $request, Response $response) {

        $date = date('Y-m-d h:i:s');
        $provider = $request->input('provider');

        if ($provider == 'google') {
            $id_token = $request->header('Authorization');
            $id_token = str_replace("Bearer ","",$id_token);

            $CLIENT_ID = Config::get('google.client_id');

            $email = $request->input('email');
            $names = $request->input('name');
            $name = explode(' ', $names);

            $client = new \Google_Client();
            $client->setDeveloperKey($CLIENT_ID);
            $payload = $client->verifyIdToken($id_token);
            if ($payload) {
                if (User::where('email', '=', $email)->exists()) {

                    $user = User::Where('email', '=', $email)->first();
                    if(!Auth::loginUsingId($user->id)){
                        return response()->json([
                            'failed'
                        ], 403);
                    }

                    $updateLastLoginDate = User::where('id', Auth::user()->id)-first();
                    $updateLastLoginDate->last_login_date = $date;
                    $updateLastLoginDate->save();

                    $activeAccount = Auth::user();
                    $activeAccount->active = '1';
                    $activeAccount->save();

                } else {

                    $recordUser = New User;
                    $recordUser->email = $request->input('email');
                    $recordUser->last_login_date = $date;
                    $recordUser->save();

                    $recordLinkedSocialAcounts = new LSA;
                    $recordLinkedSocialAcounts->user_id = $recordUser->id;
                    $recordLinkedSocialAcounts->provider_name = $provider;
                    $recordLinkedSocialAcounts->provider_id = $request->input('id');
                    $recordLinkedSocialAcounts->save();

                    $recordUserInformation = new UPI;
                    $recordUserInformation->user_id = $recordUser->id;
                    $recordUserInformation->first_name = $name[0];
                    $recordUserInformation->last_name = $name[1];
                    $recordUserInformation->last_login_date = $date;
                    $recordUserInformation->image = $request->input('image');
                    $recordUserInformation->save();

                    if(!Auth::loginUsingId($recordUser->id)){
                        return response()->json([
                            'failed'
                        ], 403);
                    }
                }

                return response()->json([
                    'access_token' => Auth::user()->createToken('access_token')->accessToken,
                    'role_id' => Auth::user()->role_id
                ], 200);
            } else {
                return response()->json([
                    'failed'
                ], 403);
            }
        }
    }



我很可能很快会制作一个视频。只要问任何问题
文档都非常干净，可以理解。在Angular中，您可以在对后端api执行请求之前，将以下内容注入到头：
Authorization:Bearer{jwt here}
。后端只需获取http头并分解头属性，然后获取jwt令牌以解析jwt内部编码的数据。我设置的方式是让前端登录，获取令牌和信息，如电子邮件和名称，然后将其发送到后端，然后通过google验证令牌，这样它就可以使用图来验证它是否有效，然后从那里获取信息检查他们是否有用户，然后ethier为他们创建帐户或登录，您只需在Lumen上通过电子邮件就可以登录他们。如果你愿意，我可以举个例子作为答案like@SCRATK是的，这样做，让我通过你的例子来理解这个过程，我的主要困惑是我应该用angular 5实现satellizer来处理所有的社交登录，然后将用户的电子邮件或信息发送至lumen api进行登录，并通过我的JWT身份验证返回令牌以进一步工作，这个方法正确吗？这是我用过的方法，我会把它作为一个答案。你对流明做了什么？你没有解释它的用途here@BlackMamba看看这个，用Lumen建立社交名媛Ohh好吧，但我在等你的视频；）@BlackMamba我会尽力整理我有一段视频给Laravel 5，只是最近没时间