Darko Pavić
Great job. Everything is working as expected.
Ionic Social Sign-on using OAuth - No Backend Required
**GOOGLE PLUS LOGIN IS NO LONGER SUPPORTED
Ionic Social Sign-on - No Backend Needed
Login into your app using Facebook, Twitter, or Instagram. This app does not have a backend, and it does not store any information. You can add your own server logic if you need it.
If you need a social login app with a backend that stores user information then check out: Single Sign-On Side Menu
Check out my other useful starters are here: Great Ionic Starters.
sudo npm install -g ionic
ionic platform add ios
ionic platform add android
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-whitelist
npm install --save ng-resource
ionic emulate ios
(do not run with livereload)ionic run android
(after you have a Genymotion Emulator instance running)ionic serve
or ionic run -l
you will encounter Cross Origin Issues (CORS). You can read about it here.Hey there! You'll need to log in before you can leave a comment here.
Hi, just a couple of questions before buying: 1)Does this plugin come with documentation? 2)What does the plugin return upon loggin in via the selected service ? will it return a valid token to use for querying the web APIs of the service the user logged in? Thank you very much!
1. There is no official documentation on this. The code is simple, clean and well documented. And if you have any questions, I can help. 2. It returns the valid token you can use with their services.
Everything worked fine, thanks! Just another question: i had to add the "ng-cordova-oauth.min.js" file manually in order to make it work, but i could not find it in the example project. Did i miss something?
ng-cordova.min.js is located in the js folder and linked in the index.html file, that should have worked.
I followed the instructions and when open the app and press in a button to get login in facebook nothing happen. in the step: npm install --save ng-resource a found this issues: npm WARN EPACKAGEJSON ionic-project@1.1.1 No repository field. npm WARN EPACKAGEJSON ionic-project@1.1.1 No license field.
I found in my console that the issues is: Facebook Login Error: Could not find InAppBrowser plugin
how are you starting the project? and can you try to run `cordova plugin add cordova-plugin-inappbrowser` again
I downloaded the zip file and follow the instructions: Install Ionic sudo npm install -g ionic Add platform ionic platform add ios Add platform ionic platform add android cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-whitelist Install ngResource npm install --save ng-resource ionic emulate ios (do not run with livereload) ionic run android (after you have a Genymotion Emulator instance running)
I understand you followed the instructions, but in order to help debug the issue I need to know what OS, hardware or software you are using. And what is the command line you run to launch the project.
a question for google and facebook you need a url for callback ? how i need config my google + and facebook app as native or only web?
For callback you can use http://localhost/callback but for twitter you will have to use TinyURL for http://localhost/callback. You have to register your apps as web applications with the Social Providers (google, facebook, etc).
Are you able to see a facebook login field now when running ionic emulate ios? You should be able to run my code as is without changing anything to test if it's working.
I replace the my www with the original and I have the same issue. I tested the $cordovaInAppBrowser.open in the app and the plug in works fine.
No, I'm testing in the ios simulator directly. For some reason if I update the version of ngcordova the app freezed in the splash session window.
In the project directory try to run `ionic lib update` and then `cordova plugin add cordova-plugin-inappbrowser` again
and what is your `cordova --version`? I have tested 6.2.0. And yes I can confirm the new ngCordova isn't compatible.
My Cordova version is 6.0.0. I was very excited to win time with this, you think you have your solution? And how long it can take to fix it?
I would try upgrading cordova to 6.2.0 at least. Another thing I would try is running `npm install` in the project. It will give you some deprecated warnings but not errors. I can't think of why it wouldn't be working for you other than maybe your cordova version being different or you have to install the `cordova-plugin-whitelist` again. I will have to do some more testing and let you know. Not sure how long this will take as I cannot reproduce your issue, it works on my iOS simulator. Also make sure you are running the latest MacOS and XCODE.
A possible solution is removing the inappbrowser `cordova plugin remove cordova-plugin-inappbrowser` and then adding it back again.
I reinstalled ios platform and work fine ! I will back with you if I found. but I think the issue is about the order of plugins.
I need facebook and google login for android and ios ,Are you able to do this ? and how I see the working before buy this app ?
Yes that's what this app does. I don't have demos but I offer full refunds if you can't get it working.
Hi there, before I buy it, I'd want to know stuff. I want to use this, but I want it to be very secure. Will this save any data on my app or the local storage? I mean, how secure is it? Can people reach it via the internet? Or is it all save because EVERYTHING is saved on a MySQL server or something? Could you explain this to me?
This one is just social login without any backend, nothing is saved any any DB. You have to write your own backend if you want to save any user data. This just confirms user logged in via social platform. You get their user login information provided by the platform selected.
When will it be updated to the latest version of ionic?
Sorry I don't have any plans to use Ionic 2 right now. I just haven't had any need for it myself to be honest. And Ionic 2 is still in beta as of today, so I don't recommend using it on any production software because things might change still. Once they release an official Ionic 2 version I will look at it again and re-evaluate.
Hi before buying it, can you answer a few questions? 1. Instagram has changed their API restrictions since June. Does your Instagram login returns a valid access_token to make API requests? 2. As you mentioned to use http://localhost/callback as callback url for local testing, but what callback url should we put if the app is going live? 3. What's your advice to handle the access_token expired situation?
You can keep the callback as localhost if you are developing a native/hybrid app. If you are running in the browser then the callback has to be the url of where you want the user to go next. I updated this app 6 months ago so I'm not sure if it works with the new APIs you're referring, but this should be easy to change if it doesn't work. You can handle tokens expiring when you're making api requests, the request response will fail with an error usually a user_access error. At this point you have to show the user the login screen again.
Thank you for the reply. I've made the purchase. But still have the concern that putting localhost as the callback url will not be accepted by Instagram if one's app wants to get out of the sad sandbox mode. In that case, do you think it's ok to use tinyURL too, or by giving other real https url?
Yes access token works fine. Thanks. I see your code uses ng-cordova, but if ionic.native might be imported at some stage, do you think they'll be compatible with each other?
Does it work on TODAY's login time with google?
Hello. I saw that it worked perfectly with google, but only with ANDROID! I did the same procedure in IOS and I get the error: Could not find InAppBrowser plugin. Do you have any idea what it is?
most likely you installed the iOS platform after all the plugins. You need to run npm install or re-install all the plugins in the list
already did that ! Remove the platform ios and plugins, then added the platform and then the 2 plugins again, but the error still persists! :(
Maybe try to just reinstall the 2 cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-whitelist There might be an issue with your whitelist.
I have bought and implemented in my ionic1 app. Facebook is working fine but Google throws the error: Error social login google Google no longer supports authentication requests from the web view. More information can be found at https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html Can you give me some tip on how to make it work?
Are you compiling it into an app or running it in the browser? It looks like it won't work in the browser. I will investigate
Neven, thanks for the prompt reply. My application is being created using IONIC1 and it is an APK. In the browser I knew it should not work.
Is your test application still working? It looks like this was a recent change made by Google. I mean "no longer supports authentication requests from the web view"
Under `https://console.developers.google.com/apis` did you register your app as a `web application`
I have copied your code, created an APK and install it on my Android device. It shows the background but no button works. I kept the code as is, no IDs change, any line changed,
I have loaded you example on my device. When I press Google, get an error: "Error: disallowed_useragent This user-agent is no permitted to make an OAuth authorization request to Google as it is classified as an embedded user-agent (also know as webview). Per our policy, only browsers are permitted to make authorization requests to Google. We offer several libraries and samples for native apps to perform authorization requests in browser."
https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html
It looks like the app will have to be modified to use this new way: https://github.com/EddyVerbruggen/cordova-plugin-googleplus I will need some time to work on it.
I see. Thanks for the attention. By now, while there is no better solution, I will keep only Facebook login.
Have you tried using this example on the bottom? http://blog.ionic.io/google-oauth-changes/ Using ionic native for V1.
If you can test and let me know if works with IONIC 1, that would be great. Thanks for your effort!
I was following these instructions https://github.com/EddyVerbruggen/cordova-plugin-googleplus. But the iOS process is just way too complicated so I will not be proceeding with this for my templates as of now. I will remove all the google logins until I migrate to Ionic 3. If you need it only for Android then it's much easier, but still I can't just add it for Android right now.
Twitter login is working but it is not bringing the email in the result object. I have configured in dev twitter website to return the email, but I can´t see any change in the result object. Can you share a piece of code on how to get the user email from twitter? Thanks
Hey, I think you might have to make an extra request for an email. But as far as I know an email isn't guaranteed. You can see on twitter apis that if the user doesn't verify the email you will get a null. https://dev.twitter.com/rest/reference/get/account/verify_credentials
Sorry I don't have any code that does this. Do some googleing for javascript solutions for this and you might have some luck.
Hi, is this project valid for ionic 3? Tryng to use it now get error on run > ng run app:serve --host=0.0.0.0 --port=8100 [ng] The run command requires to be run in an Angular project, but a project definition could not be found. [ERROR] ng has unexpectedly closed (exit code 1). The Ionic CLI will exit. Please check any output above for error details. $ ionic info [ERROR] Error loading @ionic/angular package.json: Error: Cannot find module '@ionic/angular/package' [ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package' [ERROR] Error loading @angular-devkit/build-angular package.json: Error: Cannot find module '@angular-devkit/build-angular/package' Ionic: ionic (Ionic CLI) : 4.6.0 (/usr/local/lib/node_modules/ionic) Ionic Framework : not installed @angular-devkit/build-angular : not installed @angular-devkit/schematics : 7.1.4 @angular/cli : 7.1.4 @ionic/angular-toolkit : not installed Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4, ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins) System: NodeJS : v10.14.2 (/usr/local/bin/node) npm : 6.4.1 OS : macOS Mojave Xcode : Xcode 10.1 Build version 10B61
Hi, is this project valid for ionic 3? Tryng to use it now get error on run > ng run app:serve --host=0.0.0.0 --port=8100 [ng] The run command requires to be run in an Angular project, but a project definition could not be found. [ERROR] ng has unexpectedly closed (exit code 1). The Ionic CLI will exit. Please check any output above for error details. $ ionic info [ERROR] Error loading @ionic/angular package.json: Error: Cannot find module '@ionic/angular/package' [ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find module '@ionic/angular-toolkit/package' [ERROR] Error loading @angular-devkit/build-angular package.json: Error: Cannot find module '@angular-devkit/build-angular/package' Ionic: ionic (Ionic CLI) : 4.6.0 (/usr/local/lib/node_modules/ionic) Ionic Framework : not installed @angular-devkit/build-angular : not installed @angular-devkit/schematics : 7.1.4 @angular/cli : 7.1.4 @ionic/angular-toolkit : not installed Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.1.4, ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins) System: NodeJS : v10.14.2 (/usr/local/bin/node) npm : 6.4.1 OS : macOS Mojave Xcode : Xcode 10.1 Build version 10B61
Twitter login is working but it is not bringing the email in the result object. I have configured in dev twitter website to return the email, but I can´t see any change in the result object. Can you share a piece of code on how to get the user email from twitter? Thanks
Hey, I think you might have to make an extra request for an email. But as far as I know an email isn't guaranteed. You can see on twitter apis that if the user doesn't verify the email you will get a null. https://dev.twitter.com/rest/reference/get/account/verify_credentials
Sorry I don't have any code that does this. Do some googleing for javascript solutions for this and you might have some luck.
I have bought and implemented in my ionic1 app. Facebook is working fine but Google throws the error: Error social login google Google no longer supports authentication requests from the web view. More information can be found at https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html Can you give me some tip on how to make it work?
Are you compiling it into an app or running it in the browser? It looks like it won't work in the browser. I will investigate
Neven, thanks for the prompt reply. My application is being created using IONIC1 and it is an APK. In the browser I knew it should not work.
Is your test application still working? It looks like this was a recent change made by Google. I mean "no longer supports authentication requests from the web view"
Under `https://console.developers.google.com/apis` did you register your app as a `web application`
I have copied your code, created an APK and install it on my Android device. It shows the background but no button works. I kept the code as is, no IDs change, any line changed,
I have loaded you example on my device. When I press Google, get an error: "Error: disallowed_useragent This user-agent is no permitted to make an OAuth authorization request to Google as it is classified as an embedded user-agent (also know as webview). Per our policy, only browsers are permitted to make authorization requests to Google. We offer several libraries and samples for native apps to perform authorization requests in browser."
https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html
It looks like the app will have to be modified to use this new way: https://github.com/EddyVerbruggen/cordova-plugin-googleplus I will need some time to work on it.
I see. Thanks for the attention. By now, while there is no better solution, I will keep only Facebook login.
Have you tried using this example on the bottom? http://blog.ionic.io/google-oauth-changes/ Using ionic native for V1.
If you can test and let me know if works with IONIC 1, that would be great. Thanks for your effort!
I was following these instructions https://github.com/EddyVerbruggen/cordova-plugin-googleplus. But the iOS process is just way too complicated so I will not be proceeding with this for my templates as of now. I will remove all the google logins until I migrate to Ionic 3. If you need it only for Android then it's much easier, but still I can't just add it for Android right now.
Does it work on TODAY's login time with google?
Hello. I saw that it worked perfectly with google, but only with ANDROID! I did the same procedure in IOS and I get the error: Could not find InAppBrowser plugin. Do you have any idea what it is?
most likely you installed the iOS platform after all the plugins. You need to run npm install or re-install all the plugins in the list
already did that ! Remove the platform ios and plugins, then added the platform and then the 2 plugins again, but the error still persists! :(
Maybe try to just reinstall the 2 cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-whitelist There might be an issue with your whitelist.
Hi before buying it, can you answer a few questions? 1. Instagram has changed their API restrictions since June. Does your Instagram login returns a valid access_token to make API requests? 2. As you mentioned to use http://localhost/callback as callback url for local testing, but what callback url should we put if the app is going live? 3. What's your advice to handle the access_token expired situation?
You can keep the callback as localhost if you are developing a native/hybrid app. If you are running in the browser then the callback has to be the url of where you want the user to go next. I updated this app 6 months ago so I'm not sure if it works with the new APIs you're referring, but this should be easy to change if it doesn't work. You can handle tokens expiring when you're making api requests, the request response will fail with an error usually a user_access error. At this point you have to show the user the login screen again.
Thank you for the reply. I've made the purchase. But still have the concern that putting localhost as the callback url will not be accepted by Instagram if one's app wants to get out of the sad sandbox mode. In that case, do you think it's ok to use tinyURL too, or by giving other real https url?
Yes access token works fine. Thanks. I see your code uses ng-cordova, but if ionic.native might be imported at some stage, do you think they'll be compatible with each other?
Hi, just a couple of questions before buying: 1)Does this plugin come with documentation? 2)What does the plugin return upon loggin in via the selected service ? will it return a valid token to use for querying the web APIs of the service the user logged in? Thank you very much!
1. There is no official documentation on this. The code is simple, clean and well documented. And if you have any questions, I can help. 2. It returns the valid token you can use with their services.
Everything worked fine, thanks! Just another question: i had to add the "ng-cordova-oauth.min.js" file manually in order to make it work, but i could not find it in the example project. Did i miss something?
ng-cordova.min.js is located in the js folder and linked in the index.html file, that should have worked.
Hi there, before I buy it, I'd want to know stuff. I want to use this, but I want it to be very secure. Will this save any data on my app or the local storage? I mean, how secure is it? Can people reach it via the internet? Or is it all save because EVERYTHING is saved on a MySQL server or something? Could you explain this to me?
This one is just social login without any backend, nothing is saved any any DB. You have to write your own backend if you want to save any user data. This just confirms user logged in via social platform. You get their user login information provided by the platform selected.
I need facebook and google login for android and ios ,Are you able to do this ? and how I see the working before buy this app ?
Yes that's what this app does. I don't have demos but I offer full refunds if you can't get it working.
I followed the instructions and when open the app and press in a button to get login in facebook nothing happen. in the step: npm install --save ng-resource a found this issues: npm WARN EPACKAGEJSON ionic-project@1.1.1 No repository field. npm WARN EPACKAGEJSON ionic-project@1.1.1 No license field.
I found in my console that the issues is: Facebook Login Error: Could not find InAppBrowser plugin
how are you starting the project? and can you try to run `cordova plugin add cordova-plugin-inappbrowser` again
I downloaded the zip file and follow the instructions: Install Ionic sudo npm install -g ionic Add platform ionic platform add ios Add platform ionic platform add android cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-whitelist Install ngResource npm install --save ng-resource ionic emulate ios (do not run with livereload) ionic run android (after you have a Genymotion Emulator instance running)
I understand you followed the instructions, but in order to help debug the issue I need to know what OS, hardware or software you are using. And what is the command line you run to launch the project.
a question for google and facebook you need a url for callback ? how i need config my google + and facebook app as native or only web?
For callback you can use http://localhost/callback but for twitter you will have to use TinyURL for http://localhost/callback. You have to register your apps as web applications with the Social Providers (google, facebook, etc).
Are you able to see a facebook login field now when running ionic emulate ios? You should be able to run my code as is without changing anything to test if it's working.
I replace the my www with the original and I have the same issue. I tested the $cordovaInAppBrowser.open in the app and the plug in works fine.
No, I'm testing in the ios simulator directly. For some reason if I update the version of ngcordova the app freezed in the splash session window.
In the project directory try to run `ionic lib update` and then `cordova plugin add cordova-plugin-inappbrowser` again
and what is your `cordova --version`? I have tested 6.2.0. And yes I can confirm the new ngCordova isn't compatible.
My Cordova version is 6.0.0. I was very excited to win time with this, you think you have your solution? And how long it can take to fix it?
I would try upgrading cordova to 6.2.0 at least. Another thing I would try is running `npm install` in the project. It will give you some deprecated warnings but not errors. I can't think of why it wouldn't be working for you other than maybe your cordova version being different or you have to install the `cordova-plugin-whitelist` again. I will have to do some more testing and let you know. Not sure how long this will take as I cannot reproduce your issue, it works on my iOS simulator. Also make sure you are running the latest MacOS and XCODE.
A possible solution is removing the inappbrowser `cordova plugin remove cordova-plugin-inappbrowser` and then adding it back again.
I reinstalled ios platform and work fine ! I will back with you if I found. but I think the issue is about the order of plugins.
When will it be updated to the latest version of ionic?
Sorry I don't have any plans to use Ionic 2 right now. I just haven't had any need for it myself to be honest. And Ionic 2 is still in beta as of today, so I don't recommend using it on any production software because things might change still. Once they release an official Ionic 2 version I will look at it again and re-evaluate.
Hey there! You'll need to log in before you can leave a rating here.
Real nice, works as advertised and the price was certainly right!
{{ rating.comment }}
{{ rating.comment }}
Real nice, works as advertised and the price was certainly right!