Utilizing Google OAuth2 API within an Angular2 Typescript Application

Question

Utilizing Google OAuth2 API within an Angular2 Typescript Application

Looking to incorporate the Google oauth2 API and Calender API into my Angular2 application. Struggling to find a working sample to guide me through the integration process.

Has anyone come across a functioning example?

Thanks, Hacki

angular typescript oauth-2.0 typescript-typings

Answer 1

Answer №1

Installation Process

To install ng2-cordova-oauth and its dependencies in your Apache Cordova project, run the following command from the project root:

npm install ng2-cordova-oauth --save

This command will handle the installation process for you.

Configuration:

The library consists of two main entities: Platform (e.g., Cordova, Browser) and Provider (e.g., Facebook, LinkedIn). Each provider has its own specific class that needs to be injected into the classes where they will be used. For instance, if you intend to implement Facebook oauth functionality in a particular class, the code snippet would look something like this:

import {Facebook, Google} from 'ng2-cordova-oauth/core';
import {OauthBrowser} from 'ng2-cordova-oauth/platform/browser'

// or

import {OauthCordova} from 'ng2-cordova-oauth/platform/cordova'


import {Component} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {Facebook, Google, LinkedIn} from "ng2-cordova-oauth/core";
import {OauthCordova} from 'ng2-cordova-oauth/platform/cordova';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    private oauth: OauthCordova = new OauthCordova();
    private facebookProvider: Facebook = new Facebook({
      clientId: "CLIENT_ID_HERE",
      appScope: ["email"]
    })

    constructor(private navCtrl: NavController, private platform: Platform) { }

    public facebook() {
        this.platform.ready().then(() => {
            this.oauth.logInVia(this.facebookProvider).then(success => {
                console.log("RESULT: " + JSON.stringify(success));
            }, error => {
                console.log("ERROR: ", error);
            });
        });
    }

}

For more details, check out https://github.com/nraboy/ng2-cordova-oauth

Answer 2

Installation Process

To install ng2-cordova-oauth and its dependencies in your Apache Cordova project, run the following command from the project root:

npm install ng2-cordova-oauth --save

This command will handle the installation process for you.

Configuration:

The library consists of two main entities: Platform (e.g., Cordova, Browser) and Provider (e.g., Facebook, LinkedIn). Each provider has its own specific class that needs to be injected into the classes where they will be used. For instance, if you intend to implement Facebook oauth functionality in a particular class, the code snippet would look something like this:

import {Facebook, Google} from 'ng2-cordova-oauth/core';
import {OauthBrowser} from 'ng2-cordova-oauth/platform/browser'

// or

import {OauthCordova} from 'ng2-cordova-oauth/platform/cordova'


import {Component} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {Facebook, Google, LinkedIn} from "ng2-cordova-oauth/core";
import {OauthCordova} from 'ng2-cordova-oauth/platform/cordova';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    private oauth: OauthCordova = new OauthCordova();
    private facebookProvider: Facebook = new Facebook({
      clientId: "CLIENT_ID_HERE",
      appScope: ["email"]
    })

    constructor(private navCtrl: NavController, private platform: Platform) { }

    public facebook() {
        this.platform.ready().then(() => {
            this.oauth.logInVia(this.facebookProvider).then(success => {
                console.log("RESULT: " + JSON.stringify(success));
            }, error => {
                console.log("ERROR: ", error);
            });
        });
    }

}

For more details, check out https://github.com/nraboy/ng2-cordova-oauth

Utilizing Google OAuth2 API within an Angular2 Typescript Application

Answer №1

Similar questions

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Executing a single insert statement in a TypeScript Express application using PostgreSQL is taking over 240 milliseconds to complete

You are able to set up the booking.com form once but cannot do so again using the ngOnInit method

Event emitters from Angular 4 are failing to receive emitted events after the page is refreshed

At what point does a vulnerability in a React or Angular library become a serious threat?

Sending a POST request with parameters using HttpClient

Guide for creating a function that accepts an array containing multiple arrays as input

Determine the field's type without using generic type arguments

What is the best way to display breadcrumb text on a new line within a pop up when the width exceeds without resorting to a scroll bar

Using TypeScript generics with the `keyof` operator may result in rejection

Obtain a collection of lists stored in Firebase

Currently, I'm harnessing the power of TypeScript and React to identify and capture a click event on a dynamically generated element within my document

Whenever you run the ng (Angular) command, it automatically opens up a text editor for you

Error in Angular 7: Can't assign type 'void[]' to type

What is the best way to include a new property to an existing interface and then export the updated interface in Typescript?

Make sure a Typescript array contains a particular value

Combining various DTOs in a seamless manner for validation in TypeScript is made easy with the class-validator fusion technique

Strict mode error occurs when attempting to assign a value to ngComponentOutlet that is incompatible with the type of the lazy-loaded component

Associative TypeScript Arrays

Angular 5 with Typescript encountered a failure in webpack due to the absence of the property "data" on the Response