reactivos - login angular 2 example
Cómo implementar SignIn con Google en Angular 2 usando Typecript (7)
A partir de ahora, llegó la última versión angular y en su mayoría estamos usando angular 4/5/6, por lo que pensé en dar esta solución simple para iniciar sesión en redes sociales para que alguien que realmente lo quiera
Angular 4/5/6 Inicio de sesión social
En su AppModule, importe el SocialLoginModule
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("Google-OAuth-Client-Id")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("Facebook-App-Id")
},
{
id: LinkedInLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("LinkedIn-client-Id", false, ''en_US'')
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [
...
],
imports: [
...
SocialLoginModule
],
providers: [
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
],
bootstrap: [...]
})
export class AppModule { }
Y úsalo en tus componentes
importando los siguientes módulos
import { AuthService } from "angularx-social-login";
import { SocialUser } from "angularx-social-login";
Para una referencia completa, puedes mirar su Github
tiene una página realmente simple para demo
He estado tratando de implementar el inicio de sesión con Google en angular 2 en un componente de inicio de sesión separado. No puedo implementarlo con la documentación disponible en Google https://developers.google.com/identity/sign-in/web/sign-in
El inicio de sesión de Google funciona cuando declaro mis etiquetas de script y la función de devolución de llamada de Google dentro de mi archivo index.html. Pero necesito un componente separado para poder procesar el inicio de sesión con el botón de Google y recibir la devolución de llamada para procesar aún más el token de acceso que se recibe para un usuario
src / index.html
En el archivo index.html de su aplicación, debe agregar esto en la sección
<head>
:
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
tipings / navegador / ambiente / gapi /
gapi agregar gapi y gapi.auth2 a sus tipings:
npm install --save @types/gapi.auth2
npm install --save @types/gapi
(vea la question este borysn para entender esto un poco mejor).
src / app / + login / login.component.ts
Este es el archivo de mi componente, aquí debe usar
ngAfterViewInit()
para usar gapi y obtener la autenticación.
Y puede seguir la implementación aquí
developers.google...sign-in/web/build-button
Como ejemplo, esta es mi plantilla:
<div id="my-signin2"></div>
y la función de inicio de sesión:
ngAfterViewInit() {
gapi.signin2.render(''my-signin2'', {
''scope'': ''profile email'',
''width'': 240,
''height'': 50,
''longtitle'': true,
''theme'': ''light'',
''onsuccess'': param => this.onSignIn(param)
});
}
public onSignIn(googleUser) {
var user : User = new User();
((u, p) => {
u.id = p.getId();
u.name = p.getName();
u.email = p.getEmail();
u.imageUrl = p.getImageUrl();
u.givenName = p.getGivenName();
u.familyName = p.getFamilyName();
})(user, googleUser.getBasicProfile());
((u, r) => {
u.token = r.id_token;
})(user, googleUser.getAuthResponse());
user.save();
this.goHome();
};
ACTUALIZACIÓN: Después de un tiempo, y teniendo en cuenta los comentarios, esta respuesta necesitaba una pequeña actualización.
Agregue esta línea en el archivo
index.html
su aplicación
ÍNDICE.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
Archivo Component.ts
declare const gapi: any;
public auth2: any;
public googleInit() {
gapi.load(''auth2'', () => {
this.auth2 = gapi.auth2.init({
client_id: ''YOUR_CLIENT_ID.apps.googleusercontent.com'',
cookiepolicy: ''single_host_origin'',
scope: ''profile email''
});
this.attachSignin(document.getElementById(''googleBtn''));
});
}
public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
(googleUser) => {
let profile = googleUser.getBasicProfile();
console.log(''Token || '' + googleUser.getAuthResponse().id_token);
console.log(''ID: '' + profile.getId());
console.log(''Name: '' + profile.getName());
console.log(''Image URL: '' + profile.getImageUrl());
console.log(''Email: '' + profile.getEmail());
//YOUR CODE HERE
}, (error) => {
alert(JSON.stringify(error, undefined, 2));
});
}
ngAfterViewInit(){
this.googleInit();
}
Archivo html de plantilla
<button id="googleBtn">Google</button>
Ver la demostración en Plunker
El alcance léxico con una función de flecha (
=>
) hace uso de
let that = this;
innecesario.
Una versión
más
limpia del ejemplo de Pravesh,
sin la necesidad de
that
solución de
alcance
, sería:
Index.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
Component.ts
declare const gapi: any;
@Component({
selector: ''google-signin'',
template: ''<button id="googleBtn">Google Sign-In</button>''
})
export class GoogleSigninComponent implements AfterViewInit {
private clientId:string = ''YOUR_CLIENT_ID.apps.googleusercontent.com'';
private scope = [
''profile'',
''email'',
''https://www.googleapis.com/auth/plus.me'',
''https://www.googleapis.com/auth/contacts.readonly'',
''https://www.googleapis.com/auth/admin.directory.user.readonly''
].join('' '');
public auth2: any;
public googleInit() {
gapi.load(''auth2'', () => {
this.auth2 = gapi.auth2.init({
client_id: this.clientId,
cookiepolicy: ''single_host_origin'',
scope: this.scope
});
this.attachSignin(this.element.nativeElement.firstChild);
});
}
public attachSignin(element) {
this.auth2.attachClickHandler(element, {},
(googleUser) => {
let profile = googleUser.getBasicProfile();
console.log(''Token || '' + googleUser.getAuthResponse().id_token);
console.log(''ID: '' + profile.getId());
// ...
}, function (error) {
console.log(JSON.stringify(error, undefined, 2));
});
}
constructor(private element: ElementRef) {
console.log(''ElementRef: '', this.element);
}
ngAfterViewInit() {
this.googleInit();
}
}
Modelo
<div id="googleBtn">Google</div>
También hay otra forma de conectarse con google:
Agregue estas líneas en index.html :
<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
y luego aquí hay un código de muestra para escribir en un componente (o un servicio si lo desea):
import {Component} from "@angular/core";
declare const gapi : any;
@Component({ ... })
export class ComponentClass {
constructor() {
gapi.load(''auth2'', function () {
gapi.auth2.init()
});
}
googleLogin() {
let googleAuth = gapi.auth2.getAuthInstance();
googleAuth.then(() => {
googleAuth.signIn({scope: ''profile email''}).then(googleUser => {
console.log(googleUser.getBasicProfile());
});
});
}
}
Todo es igual en respuestas anteriores excepto que agregué
declarar var gapi: cualquiera; de lo contrario, obtendrá el error.
src / index.html
En el archivo index.html de su aplicación, debe agregar esto en la sección:
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
tipings / navegador / ambiente / gapi /
Debe agregar gapi y gapi.auth2 a sus tipings:
npm install --save @types/gapi.auth2
npm install --save @types/gapi
(vea la pregunta de este borysn para entender esto un poco mejor).
src / app / + login / login.component.ts
Este es el archivo de mi componente, aquí debe usar ngAfterViewInit () para usar gapi y obtener la autenticación. Y puede seguir la implementación aquí developers.google ... iniciar sesión / web / build-button
Como ejemplo, esta es mi plantilla:
<div id="my-signin2"></div>
y la función de inicio de sesión:
declare var gapi: any;
ngAfterViewInit() {
gapi.signin2.render(''my-signin2'', {
''scope'': ''profile email'',
''width'': 240,
''height'': 50,
''longtitle'': true,
''theme'': ''light'',
''onsuccess'': param => this.onSignIn(param)
});
}
public onSignIn(googleUser) {
var user : User = new User();
((u, p) => {
u.id = p.getId();
u.name = p.getName();
u.email = p.getEmail();
u.imageUrl = p.getImageUrl();
u.givenName = p.getGivenName();
u.familyName = p.getFamilyName();
})(user, googleUser.getBasicProfile());
((u, r) => {
u.token = r.id_token;
})(user, googleUser.getAuthResponse());
user.save();
this.goHome();
};
prácticamente nada de esto funcionó para mí porque quiero que Google haga el botón de Google. El código de @mathhew eon funcionó pero eso no usa su botón.
¡Así que lancé la función de éxito de datos de Google en la ventana y funciona PERFECTO! También tiene la ventaja adicional de que si el usuario ya ha iniciado sesión, llamará automáticamente a la función googleLogin.
html
<div class="g-signin2" data-onsuccess="googleLogin" data-theme="dark"></div>
En su index.html ponga esto en la cabeza:
<meta name="google-signin-client_id" content="YOUR-GOOGLE-APP-ID.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email AND WHATEVER OTHER SCOPES YOU WANT">
<script src="https://apis.google.com/js/platform.js" async defer></script>
entonces en tu ngOnInit
ngOnInit() {
(window as any).googleLogin = this.googleLogin
}
public googleLogin(userInfo) {
console.log(userInfo)
}