Sign in with Google / External authentication service

Currently working on an AngularJS application that includes Google login functionality. To implement this feature, I found a useful guide at the following link: . Additionally, there is a script that is called when the page loads:

<script type="text/javascript">
    (function () {
        var p = document.createElement('script');
        p.type = 'text/javascript';
        p.async = true;
        p.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
        var  s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(p, s);
    })();
</script>

I am seeking advice on whether this implementation is correct and how can I retrieve data from Google to display to the user. Ultimately, I want users to have the option to sign up if they are satisfied with the information provided. I have already set up my app in the Google API service but have faced challenges in getting it to work as expected.

Any help or suggestions would be greatly appreciated.

javascriptangularjsgoogle-signin

Answer №1

There is an issue where the login occurs automatically without any user interaction, which could pose problems in the future. Consider implementing a solution like the following:

<script type="text/javascript>
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
</script>

In your Angular view

function ngLogin() 
{
  var myParams = {
    'clientid' : 'YOUR_CLIENT_ID.apps.googleusercontent.com', //Make sure to set client id
    'cookiepolicy' : 'single_host_origin',
    'callback' : 'loginCallback', //specify callback function
    'approvalprompt':'force',
    'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
  };
  gapi.auth.signIn(myParams);
}

You can convert these codes to Angular framework for better implementation.

For more details, refer to this question on Stack Overflow.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to simulate a library in jest?

Currently, I am attempting to simulate the file-type library within a jest test scenario. Within my javascript document, this particular library is utilized in the subsequent manner: import * as fileType from 'file-type'; .... const uploadedFil ...

javascriptreactjsmockingjestjsenzyme

The use of $scope.$destroy may resolve memory leak issues, but it can also cause

In my TypeScript AngularJS application, I have a child directive that is dynamically generated. The template and controller are assigned at runtime based on the requirements of the situation, with multiple directives within the template. To display multipl ...

javascriptangularjsangular-directive

During model update, AngularJS experienced a loss of CSS class in DOM re-rendering

My challenge involves managing a table that dynamically updates via WebSocket messages, causing the selection state to be lost. The rows in this table loop through model data, and upon clicking a cell, all cells in the same row toggle to have an .active cl ...

javascriptjquerymodelangularjstoggleclass

Oops! Looks like there's an issue with the type error: value.forEach is

I am working on creating an update form in Angular 6 using FormArray. Below is the code snippet I have in editfrom.TS : // Initialising FormArray valueIngrident = new FormArray([]); constructor(private brandService: BrandService, private PValueInfoSe ...

javascriptangulartypescriptangular6

Transforming PHP shortcode into JQuery functionality

My website is built on Wordpress, and I use javascript to load some of the content. Here's an example: jQuery(".portfolio-fs-slides").css({"display":"none"}).prepend('<div class="portfolio-fs-slide current-slide portfolio-ppreview"><d ...

phpjavascriptjquerywordpressprepend

What steps do I need to take to create an animation where an outline gradually becomes filled in

I've been experimenting with creating a loading animation inspired by the pre-loading animation on this website. My attempt using chat GPT resulted in an unexpected outcome where, instead of filling the SVG, it placed a black square on top of it. The ...

javascripthtmlcssanimationloader

Encountering a type error when making an Ajax request in JavaScript/jQuery

Encountering an error while trying to extract a value within a loop using jQuery. The error message is displayed below. Uncaught TypeError: Cannot read property 'no_of_optional' of undefined Below is the code I am working with. var data = $.pa ...

javascriptjqueryajax

The challenges with implementing makeStyles in React Material UI

const useStyles = makeStyles((theme) => ({ toolbarMargin: { ...theme.mixins.toolbar, marginBottom: "3em", }, logo: { height: "7em", }, tabContainer: { marginLeft: "auto", }, tab: { ...theme ...

javascriptcssreactjsmaterial-uiweb-development-server

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

cssangularjsangular-material

What is the most effective approach for managing nested callbacks in Node.js/Expressjs?

My server side coding is done using Node.js and Expressjs, with MongoDB as the backend. Although I am new to these technologies, I need to perform a list of actions based on requests. For example, in user management: Check if the user is already registe ...

javascriptnode.jsarchitecturecallbackexpress

Unexpected Token E encountered in the Twitter stream.on function

I'm currently in the process of setting up a search button on my web application that will pull all Twitter tweets related to the search input using the streaming API. Below is my client-side code: <form class="navbar-form navbar-left" role="sear ...

javascriptajaxnode.jsexpresstwitter-streaming-api

Awaiting fulfillment - Promise remains pending as loop executes queries

I have a scenario where I receive an array containing multiple data elements and need to perform a query for each element in the array. However, this is resulting in a promise pending response. How can I resolve this issue? What could be causing it? getFa ...

javascriptnode.jsexpress

The compatibility issue between Bootstrap4 Navbar and "jQuery.BgSwitcher" is causing functionality limitations on mobile devices

Currently, I am utilizing Bootswatch4 within Bootstrap4 and have a requirement for a div with backgrounds that change or fade. After some research, I stumbled upon a JavaScript solution that aligns closely with my needs at: https://github.com/rewish/jquery ...

javascriptjquerytwitter-bootstrapbootstrap-4

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I kno ...

javascripthtmlcss

Sending an array and an object simultaneously through a single ajax request

I previously inquired about passing an object to an ajax request for my rest service. Now I am wondering if it's possible to pass both an array and an object within a single ajax request. Any insights on this matter would be greatly valued. ...

javascriptjqueryajaxarraysobject

Avoid shifting focus to each form control when the tab key is activated

I have a form where users need to be able to delete and add items using the keyboard. Typically, users use the tab key to move focus from one element to another. However, when pressing the tab key in this form, the focus only shifts to textboxes and not t ...

javascripthtmlcssbootstrap-5

jquery's each method is not functioning as intended and causing unexpected issues

I'm in the midst of developing a website, and one section requires users to input their details into a form. My goal is as follows: When a user clicks the submit button with any empty fields, I want a span element (initially set to display none in CS ...

javascriptjqueryhtml

Ant Design is incompatible with React JS projects and cannot be effectively utilized

import React from 'react'; import styled from "styled-components"; import {Col, Row} from "antd"; const TitleBig = styled.div` font-family: "Bebas Neue Pro"; font-size: 20px; `; const TitleSmall = styled.div` ...

javascriptreactjsnext.jsantdstyled-components

Tips for creating a function that utilizes a select option value

I'm struggling with a form that includes two select inputs. I want the second input to only be enabled if the first one has been selected. I attempted using an onclick event, but it didn't work out as expected. Can anyone provide assistance? (apo ...

javascripthtml

Tips for refreshing the page without losing the values of variables

In my simulation.jsp file, I have the following code that retrieves simulation data from a struts2 action: $(document).ready(function() { var data='<s:property escape="false" value="simInfos" />'; } Once I perform the simulation with this ...

javascriptjqueryhtmljspstruts2