我在 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>