0

我在 Angular 中通过 google 测试了 OAuth。我为简单的授权编写了以下代码。但由于某种原因,它会在 Opera 中引发错误。但在 Google Chrome 中,Edge 可以完美运行。也许有人有同样的问题 在此处输入图像描述

我在app.module.ts中有以下代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpClientModule} from "@angular/common/http"
import {FormsModule} from "@angular/forms"

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {LoginComponent} from "./login/login.component"

import {SocialAuthServiceConfig, SocialLoginModule, GoogleLoginProvider } from 'angularx-social-login';



@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SocialLoginModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              '324093147269-l4aepli8cfokli5fuiotn9huekmjugq7.apps.googleusercontent.com'
            )
          }
        ]
      } as SocialAuthServiceConfig,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用简单的 app.component.html

<h2>fsdnklflsdkfn</h2>
<app-login></app-login>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {SocialAuthService } from 'angularx-social-login';
import {SocialUser, GoogleLoginProvider } from 'angularx-social-login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  user:SocialUser=new SocialUser();
  constructor(private socialAuthService: SocialAuthService) 
  {
    this.socialAuthService.authState.subscribe((user)=>{
      this.user=user;
      console.log("aadas");
    })
   }

  ngOnInit() {
      this.socialAuthService.authState.subscribe((user)=>{
      this.user=user;
      console.log("aadas");
    })
  } 
  signInWithGoogle(){
    this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID)
  console.log("aadas");
  }
  signOut(){
    this.socialAuthService.signOut();
  }
}

login.component.html

<div *ngIf="!user" class="card text-center">
  <h6 class="card-header">Google login</h6>
  <div class="card-clock">
    <h4 class="card-title">Not Signed in</h4>
    <p class="card-text">Sign in</p>
  </div>
</div>
<div class="card-block">
  <button (click)="signInWithGoogle()">Sign in</button>
</div>


<div *ngIf="user" class="card text-center">
  <h6 class="card-header">Google login</h6>
  <div class="card-clock">
    <h4 class="card-title">{{user.email}}</h4>
    <p class="card-text">{{user.authToken}}</p>
  </div>
</div>
<div class="card-block">
  <button (click)="signOut()">Sign out</button>
</div> 
4

0 回答 0