Let\u2019s get started! <\/p>\n
GMAIL<\/h2>\n
To integrate Gmail Sign in, we need to have an OAuth Client ID<\/strong> from the developer’s console. So, first of all, let\u2019s create it. <\/p>\n Step (1)<\/strong> Go to Google developer console<\/a>. And login with your developer’s credentials.<\/p>\n Step (2)<\/strong> Click on select a project. <\/p>\n Step (3)<\/strong> A modal popup will be open. Click on NEW PROJECT<\/strong>. If you already have a project, you can go directly to Step5<\/strong>. <\/p>\n Step (4)<\/strong> Write your Google project name and click on the CREATE<\/strong> Step (5)<\/strong> Go to the OAuth consent screen<\/strong> from the left sidebar and then select External<\/strong>. So your OAuth consent screen will be available to all users who are holding google accounts. Click on CREATE<\/strong>.<\/p>\n Step (6)<\/strong> Write the name of your application. This name will be shown on your OAuth consent screen<\/strong>. There are also other optional fields like Authorised domain link, Application Homepage link, Privacy policy link, and Terms of Service link. And these must be hosted on an Authorised domain<\/strong>.<\/p>\n If provided, these links will be shown on your OAuth consent screen<\/strong>.<\/p>\n After providing these details, click on the Save<\/strong> button below.<\/p>\n Step (7)<\/strong> Now go to Credentials from the left sidebar and click on + CREATE CREDENTIALS.<\/strong><\/p>\n Now click on OAuth Client ID<\/strong><\/p>\n Then select a Web application<\/strong> and fill the below details.<\/p>\n This name will be the name of your credentials. Also, you must enter the Authorised javascript origins<\/strong>. I am running my application on localhost:4200.<\/p>\n Authorized redirect URIs<\/strong> are optional. <\/p>\n After filling all the details, click on CREATE<\/strong>. <\/p>\n A modal popup will get open; there you will get your Client ID<\/strong> and Client Secret<\/strong>.<\/p>\n Now you have successfully created your OAuth Client ID.<\/strong> <\/p>\n NOTE:<\/strong> If I change my authorized javascript origin to localhost:4100,<\/p>\n As this origin is not listed in Authorised Javascript Origins<\/strong>, an error will be thrown in an application at runtime.<\/p>\n Now let\u2019s add code in our Angular 8 application. <\/p>\n Open your index.html<\/strong> file and add below lines in < head > tag. <\/p>\n Now, add the below code in your component. <\/p>\n component.html:<\/em> <\/p>\n component.ts:<\/em><\/p>\n Firstly, Declare a global variable after all the import statements. <\/p>\n Now declare and define the below function<\/p>\n Now, Call the above function in ngOninit() lifecycle,<\/p>\n Now run the application\u2026 After successful login, you will get user id token. This id token should be sent to your server with an HTTPS request. There you must verify this token. <\/p>\n All information is given in this here<\/a>.<\/p>\n That\u2019s it! This is all you need to do. <\/p>\n NOTE: I have described only one of the methods to integrate Gmail sign-in button. But there are many other different ways to do it. You can check it in the official documentation<\/a>.<\/strong><\/p>\n For integrating Facebook login button in any application, we must have an APP ID<\/strong>, for that we need to create an application in Facebook developer\u2019s console. <\/p>\n So, to set up your Facebook application, follow these steps.<\/p>\n Step (1)<\/strong> Go to Facebook developor\u2019s console<\/a>. And login with your developer’s credentials.<\/p>\n Step (2)<\/strong> After successful login, go to My Apps<\/strong> and click on Create App<\/strong>.<\/p>\n Step (3)<\/strong> A modal popup of Create a New App ID<\/strong> will be shown. Write the name of your application and then click on Create App ID<\/strong>. <\/p>\n You will see ReCaptcha dialog, check on it, and then click on submit.<\/p>\n Step (4)<\/strong> You can see your APP ID<\/strong> below the navigation bar. But it is a must to whitelist your site URL. So Set Up<\/strong> the Facebook Login<\/strong> option. <\/p>\n Step (5)<\/strong> Select the Web<\/strong> option.<\/p>\n Step (6)<\/strong> Write your application running URL and save<\/strong> it. I am running my application on http:\\\\localhost:4200.<\/p>\n Save it. <\/p>\n That\u2019s it. Your Facebook application is set up.<\/p>\n On clicking continue, you can see the steps to integrate Facebook login in your application. You can go through it. But don\u2019t worry. I am not going to show you in just a moment.<\/p>\n Now let\u2019s add code in our Angular 8 application. <\/p>\n Open index.html <\/p>\n Now open your component,<\/p>\n component.html<\/em><\/p>\n component.ts<\/em><\/p>\n Declare a global variable after all import statements,<\/p>\n In your class constructor, <\/p>\n In ngOninit lifecycle,<\/p>\n Add the below function,<\/p>\n Make sure that the application id you have mentioned in index.html and in the component should be the same.<\/p>\n That\u2019s it. Now run the application.<\/p>\n You should see the Facebook login button. <\/p>\n This is the official documentation<\/a> for Facebook login.<\/p>\n i) For getting more information about users aside from the above scopes, you need to grant your application. You can check this here<\/a>.<\/p>\n ii) Facebook fetches only test user and developer account\u2019s data in test mode. To fetch each user’s data, you need to make your application live. You can find test users in Roles Tab.<\/p>\n For more, please check out my GITHUB<\/a> repository. <\/p>\n![\"Gmail\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Gmail.png\")
<\/p>\n![\"NEW](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/NEW-PROJECT..png\")
<\/p>\n
\nbutton.<\/p>\n![\"Create\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/CREATE.png\")
<\/p>\n![\"OAuth](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/OAuth-consent-screen.png\")
<\/p>\n![\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/OAuth-consent-screen2.png\")
<\/p>\n![\"CREATE](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/CREATE-CREDENTIALS.png\")
<\/p>\n![\"OAuth](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/OAuth-Client-ID.png\")
<\/p>\n![\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Authorised-javascript-origins.png\")
<\/p>\n![\"Authorised](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Authorised-Javascript-Origins-1.png\")
<\/p>\n\r\n< meta name=\"google-signin-client_id\" content=\"your-client-id<\/strong>\" >\r\n< script src=\"https:\/\/apis.google.com\/js\/platform.js\" >< \/script >\r\n<\/pre>\n
\r\n< div id=\"googleBtn\" >< \/div > < br \/ >\r\n<\/pre>\n
\r\ndeclare var gapi: any;\r\n<\/pre>\n
\r\npublic btnRender(): void {\r\n const options = {\r\n scope: 'profile email', \r\n width: 250,\r\n height: 50,\r\n longtitle: true,\r\n theme: 'dark',\r\n onsuccess: (googleUser => {\r\n let profile = googleUser.getBasicProfile();\r\n console.log('Token || ' + googleUser.getAuthResponse().id_token);\r\n console.log('ID: ' + profile.getId());\r\n console.log('Name: ' + profile.getName());\r\n console.log('Image URL: ' + profile.getImageUrl());\r\n console.log('Email: ' + profile.getEmail());\r\n\t\r\n\t\/\/ your-code-goes-here\r\n \r\n }),\r\n onfailure: ((error) => {\r\n console.log('failure', error);\r\n })\r\n };\r\n gapi.signin2.render('googleBtn', options);\r\n }\r\n<\/pre>\n\r\n ngOnInit() {\r\n this.btnRender();\r\n }\r\n<\/pre>\n
\nYou should see a Gmail Login button.<\/p>\nFACEBOOK<\/h2>\n
![\"Facebook](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Facebook-developor\u2019s-console.png\")
<\/p>\n![\"Create](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Create-a-New-App-ID.png\")
<\/p>\n![\"Facebook](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Facebook-Login.png\")
<\/p>\n![\"Facebook](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/Facebook-Login-web.png\")
<\/p>\n![\"Angular](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/03\/localhost-4200.png\")
<\/p>\n\r\n< script async defer crossorigin=\"anonymous\"\r\nsrc=\"https:\/\/connect.facebook.net\/en_GB\/sdk.js#xfbml=1&version=v5.0&appId=your-app-id<\/strong>&autoLogAppEvents=1\" >< \/script >\r\n<\/pre>\n
\r\n< div class=\"fb-login-button\" data-width=\"250px\" data-size=\"medium\" data-button-type=\"login_with\" data-use-continue-as=\"true\" data-auto-logout-link=\"false\" >< \/div >\r\n<\/pre>\n
declare var FB: any;<\/pre>\n
\r\nFB.fbAsyncInit = () => {\r\n FB.init({\r\n appId: \u2018your-app-id\u2019,\r\n cookie: true,\r\n xfbml: true,\r\n version: 'v5.0'\r\n });\r\n FB.AppEvents.logPageView();\r\n };\r\n<\/pre>\n\r\n ngOnInit() {\r\n ((d, s, id) => {\r\n var js, fjs = d.getElementsByTagName(s)[0];\r\n if (d.getElementById(id)) { return; }\r\n js = d.createElement(s); js.id = id;\r\n js.src = \"https:\/\/connect.facebook.net\/en_US\/sdk.js\";\r\n fjs.parentNode.insertBefore(js, fjs);\r\n })(document, 'script', 'facebook-jssdk');\r\n\r\n this.statusChange();\r\n }\r\n<\/pre>\n\r\n private statusChange(): void {\r\n FB.Event.subscribe('auth.statusChange', (response) => {\r\n console.log(\"submit login to facebook\", response);\r\n if (response.status === 'connected') {\r\n if (response.authResponse) {\r\n FB.api('\/me', {\r\n fields: 'last_name, first_name, email , picture , middle_name, name, name_format, short_name',\r\n }, (userInfo) => {\r\n console.log('userInfo', userInfo);\r\n \t\t\/\/ your-code-goes-here\r\n });\r\n }\r\n }\r\n else {\r\n console.log('User login failed');\r\n }\r\n });\r\n }\r\n<\/pre>\nFew Points : <\/h2>\n