Angular 9+ Google api module (ng-gapi)
This module will add the google api to your project. It wraps the Gapi in to a service layer allowing to work with Gapi in a Angular 9+ project.
made by codeforges
Latest News
We have started to work on our video tutorials series, Angular + NestJs a full fledged application.
Latest change
- Requires now Typescript version 3.8.3 or higher
- Requires Angular9 or higher
Installation
npm install ng-gapi
Usage
To use the ng-gapi
simply add GoogleApiModule
to your module imports
and set the configuration.
ClientConfig interface
Bellow are all available parameters that can be provided in the forRoot()
method.
//And the extended ClientConfig
Example:
; ;
Now you will have Access to the GoogleApi service.
The service has a a event method onLoad(callback)
This event will fire when the gapi script is loaded.
Usage example :
Also check the example folder with a google api reports module
GoogleAuthService
The module has a GoogleAuth service which allows you to work with the google auth
Usage:
//Example of a UserService
Lets go step by step through the example
- We create a angular Injectable() "service"
- The static property
SESSION_STORAGE_KEY
is just a sugar to store string in a property rather then hardcode - in the constructor we inject the GoogleAuthService and making it a private property of our User class
- no we have 2 public methods , sign in and get token. The signIn should be used at user login page , it will open the google auth popup.
- The get token method is used for http request to google resource where a authentication is required.
Batch requests
From gapi docs https://developers.google.com/api-client-library/javascript/features/batch
we should use gapi.client.newBatch()
But in our case we have typings and OOP, so we can do this:
Configurations
The GoogleApiConfig class provides the required configuration for the Api
Configuration is easy to use. The GoogleApiModule has a static method which sets the configs.
As shown in the example you simply provide a configuration object of type ClientConfig
.
Configure them according your google app configurations and resource scope.
- To get the clientId see in your developer console
- The discoveryDoc is in the resource description, here an example for Reporting API v4
- The scope is also in the documentation of the specific API , example for Reporting API v4
Promotion
We are providing Web Development and Consulting Services. codeforges.com