Hello guys,
In this blog, I will discuss how to implement the google drive in Ionic 2. We will implement google drive with the help of Rest API’s. We will be uploading a file, retrieving the file and search the file in google drive.
Let’s get started, We have to install ionic ‘Google Plus’ plugin in our project with client id. This plugin allows you to authenticate and identify users with Google Sign-In. To use this plugin we have to log-in to developer console https://console.developers.google.com and create a project there and enable the Google Drive API and Google Plus API.
We have to follow these steps in order to make Google Sign-In work.
Step 1:- Go to credentials
Step 2:- Choose OAuth consent screen
Step 3:- Fill all the required details
Step 4:- Choose OAuth client id
Step 5:- Fill all the required details and For SHA1 key use this ‘keytool -exportcert -keystore ~/.android/debug.keystore -list -v’ in Linux.
Step 6:- Copy Client Id & use as reverse client id
Note:- For more detail follow this link
https://codesundar.com/create-reverse-client-id-for-google-login/
Now install ‘Google Plus’ plugin with REVERSED_CLIENT_ID
$ionic cordova plugin add cordova-plugin-googleplus –variable REVERSED_CLIENT_ID=com.googleusercontent.apps.177554691045-29njrg19ttgub9739rty1i5grct60p2q
$npm install –save @ionic-native/google-plus.
Note:- At the time signing with Gmail account we should send the scope to access the drive for access permission. In the following manner : –
|
1 2 3 4 5 6 7 8 |
this.googlePlus.login({ 'scopes': 'https://www.googleapis.com/auth/drive.file' }).then((res) =>; { console.log('res: inside googlelOGIN: ', res); }).catch((error) => { console.log(error); reject(); }) |
Upload the file on google drive:-
Before uploading the file on the drive we should create the file first in our project and then insert the data into the file. To create a file in ionic, we can follow this link https://ionicframework.com/docs/native/file.
- 1. To upload the file on Google Drive we use the following API
“https://www.googleapis.com/upload/drive/v3/files?uploadType=media” - 2. In this API we send the user authentication token i.e. access token in the header section and file content should be sent in the body section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
this.getFileData().then((content) => { this.http.post('https://www.googleapis.com/upload/drive/v3/files?uploadType=media', content, {headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.accessToken)}).subscribe((data) => { let dt = {'name': 'fileName.txt'}; this.http.patch('https://www.googleapis.com/drive/v3/files/' + data['id'], dt, {headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.accessToken)}).subscribe((data) => { this.driveFileId = data['id']; this.listProviders.hideLoader(); this.listProviders.presentToast('Your data successfully uploded to Google Drive'); }, (err) => { console.log(err); this.listProviders.hideLoader(); }) }, (err) => { console.log(err); this.listProviders.hideLoader(); }) }).catch((err) => { console.log('error inside uploadfile', err); this.listProviders.hideLoader(); }); |
Steps above describe uploading the data to Google Drive. We have used “https://www.googleapis.com/drive/v3/files/” Endpoint to change the name of the text file on Google Drive.
Retrieving the file from Google Drive:-
- 1. Before retrieving the file from the drive firstly, we have to search for the file in google drive.
- 2. To search the file in Google Drive we use the endpoint i.e. “‘https://www.googleapis.com/drive/v3/files”. Which retrieves all the files from your drive.
- 3. Now we search our file name in the file list, If it exists then we take out the fileID of that particular file which consists of our data.
- 4. After Searching the file in the drive we call the API which retrieves the data from the file i.e. “https://www.googleapis.com/drive/v3/files/’ + this.driveFileId + ‘?alt=media”
You can refer to the code snippet given below for more clarification.
Searching the file in the Drive:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
this.http.get('https://www.googleapis.com/drive/v3/files', { headers: new HttpHeaders().set('Authorization', 'Bearer ' + accessToken) }).subscribe((data) => { console.log('data inside getFileIdFromDrive: ', data); data['files'].forEach((value, index) => { if (value.name == 'filName') { this.driveFileId = value.id; return; } else { if (data['files'].length == index + 1) { this.driveFileId = null; } } |
Retrieve the Data from the file:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
this.http.get('https://www.googleapis.com/drive/v3/files/' + this.driveFileId + '?alt=media', { headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.accessToken) }).subscribe((data) => { console.log('data inside: getDataFromDrive: ', data); this.deleteFile(this.driveFileId).then((data) => { this.driveFileId = null; }).catch(err => { this.listProviders.hideLoader(); console.log('error inside getDataFromDrive: ', err); }); this.listProviders.setDatabaseFromDriveData(data).then(() => { this.listProviders.hideLoader(); this.listProviders.presentToast('Data successfully retrieved') }).catch(err => { console.log('error inside setDatabaseFromDriver: ', err); this.listProviders.hideLoader(); }); }, (err) => { console.log('error ', err); this.listProviders.hideLoader(); }) } |
I hope this helps, if any extra information is required regarding web api integration, please comment below.
Read more: – https://www.jellyfishtechnologies.com/blog/
Happy Coding. 🙂
Great job, Its help Lots
it is showing me error in catch option while logining in . error is (10) can you tell me any thing about
Hi Rizwan,
That error may be occur when your SHA1 key not appropriate and you should install plugin with valid reversed client id.
How to upload file into folder
where should I want to paste this code ?? In home.ts ????? https://uploads.disquscdn.com/images/39078556c0d0a4cf95d8444dbc43ae730ef2a9b127060ef7cf0935d6fc5ce9b6.png
How can i get the access toke?