ng-social-auth v0.0.7
NgSocialAuth
This lib willingly avoid using official libs provided by companies. This is what keeps this lib lightweight and guarantees that your social auth won't be blocked by extensions such as ghostery, adblock, ublock etc.
Installation
Create a configuration file SocialAuthConfig containing configuration for the appropriate provider(s)
For example:
export const SocialAuthConfig = {
google: {
clientId: 'XXXX.apps.googleusercontent.com',
redirectUri: 'YYY',
scope: 'email',
responseType: 'token'
}
}
In you app.module.ts, import the NgSocialAuth lib with SocialAuthConfig under imports:
import { SocialAuthModule } from 'ng-social-auth/src/lib/social-auth.module';
import { SocialAuthConfig } from './PATH_TO_CONFIG/social-auth.config';
(...)
imports: [
...
SocialAuthModule.forRoot(SocialAuthConfig),
]
How to use
Get user consent from the appropriate provider:
getGoogleUserConsent()
getMicrosoftUserConsent()
getLinkedinUserConsent()
getFacebookUserConsent()
You can pass scope as arg of any of these functions. Useful when you need 2 scopes, one for signup and the other one for login.
On your redirect URI, in the constructor
constructor(
private socialAuthService: SocialAuthService
) {
socialAuthService.getParsedResponse()
.subscribe(data => {
// DO STUFF
},
error => {
// Manage errors
if (error !== null) {
console.log(error);
}
});
}
getParsedResponse will parse the URL returned and sent back all information.
Create an account on https://console.cloud.google.com/
Set up redirect_uri
Get client_id and scope you need from https://developers.google.com/identity/protocols/googlescopes
Configuration:
// Mandatory
clientId: string;
scope: string;
responseType: string;
redirectUri: string;
// Optional
includeGrantedScopes: boolean;
loginHint: string;
prompt: string;
Microsoft
Create an account following this tutorial https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-microsoft-account
Get the scope (space-separated) you need from https://docs.microsoft.com/en-us/graph/permissions-reference
Configuration:
// Mandatory
clientId: string;
scope: string;
responseType: string;
// Optional for user but set up by lib
nonce: string;
// Optional
responseMode: string;
redirectUri: string;
loginHint: string;
domainHint: string;
prompt: string;
tenant: string;
Create an app here https://www.linkedin.com/developers/developer/apps
Set up redirect_uri
Get client_id
Configuration:
// Mandatory
clientId: string;
redirectUri: string;
scope: string;
Create an account following this tutorial https://docs.microsoft.com/en-us/azure/active-directory-b2c/identity-provider-microsoft-account
Set up redirect_uri
Get client_id and scope you need from https://developers.facebook.com/docs/facebook-login/permissions/
Configuration:
// Mandatory
clientId: string;
redirectUri: string;
// Optional
responseType: string;
scope: string;
Nonce & CSRF
You can access nonce & csrf value before calling getParsedResponse(). They are stored in localStorage under the respective name csrf_social_nonce & csrf_social_csrf.