Nação Digital
I'm getting "Alert Error: Could not find InAppBrowser plugin" can you help me?
Ionic Social Login OAuth
Ionic Login OAuth - Single Sign-On With Backend - Create accounts and login with facebook, twitter, instagram or email
Free!
Neven
Member since 2015
Details
**GOOGLE PLUS LOGIN IS NO LONGER SUPPORTED
Ionic Social Login OAuth - With Backend
If you want the Social Login Features without the backend then check out Ionic Social Sign-On Basic
If you don't need Social Login part then check out: Ionic Session Login.
If you need sidemenu navigation instead use: Single Sign-On Side Menu
This is a barebone full stack application that takes the pain away from creating user accounts, login, logout and session saving as well as allowing Social Login/Signup. It uses Node, Express, MySQL, Sequelize on the backend and Ionic with cordovaOauth on the Frontend. Save a lot of time and jumpstart your app development with this awesome starter kit! Use it as a template or take out the parts you need for your app.
All of the login logic is in the services.js keeping the controllers clean for your own stuff. This makes the code very clean, reusable and modifiable. It can easily be modified to use MongoDB or some other DB system. This application creates user accounts from emails and passwords. Passwords are encrypted with crypto.
This application does not send or verify emails. It simply creates the accounts. It uses emails as usernames to verify they are unique.
Features:
- Create Users
- Login
- Logout
- Auto Login / Check Session
- Prevent duplicate accounts
- Login Error Handling
- Encrypt Passwords
- Save Login Session
- Social Login for Facebook, Twitter, Instagram
The server dependencies:
- "body-parser": "~1.12.4",
- "connect": "^3.4.0",
- "cookie-parser": "~1.3.5",
- "debug": "~2.2.0",
- "express": "~4.12.4",
- "express-session": "^1.12.1",
- "morgan": "~1.5.3",
- "mysql": "^2.9.0",
- "node-gyp": "^3.2.1",
- "q": "^1.4.1",
- "sequelize": "^3.14.1",
- "serve-favicon": "~2.2.1",
- "jade": "~1.9.2"Social Login
- You will have to create apps with Facebook and Twitter
- Use a callback url for local testing (http://localhost/callback)
- Use TInyURL callback for twitter
Server Instructions
- Go to the Server folder
- Install node.js Node.js Installation
- Install NPM
npm install - Install Express Server
npm install express --save - Install Express Session
npm install express-session - Install Connect
npm install connect - Download & Install MySQL
- Create a db: 'mydbname' (you can change this).
- To create the db you can run
mysql -u root -e "create database mydbname"; - In Server
app.jsyou have to update your own mysql parameters: dbname , user, password, url and port. npm install mysql- Install Sequelize
npm install sequelize - Install mysql option
npm install --save mysql - Start server with
npm start
Usage via http post
- http://localhost:3000/signUp
- http://localhost:3000/login
- http://localhost:3000/logout
- http://localhost:3000/checkSession
- http://localhost:3000/socialLogin
Frontend Installation
- Install Ionic
- Download Genymotion if you plan to emulate on android
- Open folder in terminal
- Install Ionic
sudo npm install -g ionic - Add platform
ionic platform add ios - Add platform
ionic platform add android cordova plugin add cordova-plugin-inappbrowsercordova 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)
Running as a website
- [Enable CORS requests](http: ubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/)
Node.js App Deployment Tutorial
- It is highly recommended you use Heroku.com as your app hosting service
- Read my tutorial on [How to Deploy Node.js app to Heroku](http: ubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/)
Common Issues
- If you're using Android Emulator or testing on a Smartphone, you cannot access your computer's localhost. In the
Frontend/www/js/services.jsyou have to replace all thelocalhostreferences with your computer external ip such as192.x.x.x. Find out what your computer's IP is and put it instead of localhost. Make sure the smartphone and your computer are on the same wifi network or your server is accessible globally. - If you try to run with
ionic serverorionic run -lyou will encounter Cross Origin Issues (CORS). You can read about it here.
Payment Information
- The payment on this site is processed by Stripe.com and sometimes your bank will decline the charges if they don't recognize it. You can contact your bank or try a different card.
Support
- Leave a comment if you get stuck on anything
- If you email me directly it might get caught in the spam filter
- And Kudos if you leave a Rating! =)
Stay in Touch
- Visit my blog rubberchickin.com.
Hey there! You'll need to log in before you can leave a comment here.
Neven
Looks like the installation might have an issue. run these 2 commands in the frontend folder. 1. cordova plugin rm org.apache.cordova.inappbrowser 2. cordova plugin add cordova-plugin-inappbrowser
Oscar Eduardo Acosta
Good morning, I have a big doubt, I bought this plugin, and indeed what I can use from my computer, ie locally, but I can not run the application, I have a website with myslq, when I think the apk with this plugin always he says that the server is not available, I changed fields localhost service.js by the server address but still does not work, what should I do?
Oscar Eduardo Acosta
For example, my application must store user data in the database of my personal web www.oskr.com.co ie, I created a database called oskr_user, with its own user name and password, these data have placed in app.js that is in the "Server" folder, these files I have uploaded to my website, in the "Fronted" folder have edited the uRL service.js that say "localhost" by management server and its port, however, the application says that the server is not available, please help, my email is adnartcolombia@gmail.com
Neven
@Oscar There are a 2 ways to do this. First one is to install node on your webserver and host the whole thing. You will have to install node.js on your own server and install the Server Folder part of my app on there. This can be quite complicated if you are not familiar with the process. And unless you own the server hardware some service providers don't let you install node. A Second and easier way is to use Heroku.com. Heroku has a free option and does not host DB directly. Once you have the Server portion working on your local machine you can then deploy that folder via dropbox to your heroku. You should be able to use your db from your own website to make it work. Heroku can host the server part and your website can host the DB. Heroku also offers JawsDB which can be used as well instead of your own website DB. The Frontend folder should not be hosted anywhere, it is used on your local machine to make a build. Remember this will only work if you are running the app on a smartphone and not via a browser. I know it's a complicated process, but Hope this helps.
Oscar Eduardo Acosta
Woouu is very complicated, I thought this would be easier process, I will try, thanks for the reply.
Oscar Eduardo Acosta
One question, I have a server where already climbed the "Server" folder, you must modify the "Fronted" folder to my server you connect?
Neven
I'm not exactly sure what you mean by that, but you have to modify all the localhost:3000 references to use your website url or ip address and port number.
Neven
I will upload a tutorial shortly on how to deploy to Heroku which is the most recommended way to deploy node apps.
Oscar Eduardo Acosta
this alternative seems interesting, but I feel more comfortable having the database on my own server, you could help me with a tutorial of the first option, please.
Neven
@Oscar you can still have the database on your own server and have the app deployed on Heroku.
Neven
And If you don't want to use Heroku then you will have to follow instroctions how to install node.js on your own server, the installation will be different depending on your Server OS or linux distro. Herei s one example for Ubuntu: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04
Neven
I have added a tutorial on how to deploy node apps to heroku, which is a popular way to deploy node.js projects. http://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/
Darko Pavić
I am getting same error no matter trying Live Layout in App Preview or "ionic emulate ios" Error ss: https://www.dropbox.com/s/44g3l48oca3v6t3/Screenshot%202016-05-03%2020.16.57.png?dl=0 Second error is when I run ionic serve and I try over browser, I am getting in chrome console "Facebook Login Error: Cannot authenticate via a web browser" Please help
Neven
@Darko Yes, if you read my Common Issues section in the Description you will see that services will only work when you run as apps on iOS and Android and not with `ionic serve`. For running `ionic emulate ios` did you replace all the localhost references with the IP of your server?
Darko Pavić
@Neven - I have replaced localhost with my local computer IP. Should I put code from "Server" folder on my public server? If yes is there any step by step how to setup & configure?
Neven
And can you confirm you have mysql running and you have updated app.js with your mysql information?
Neven
And yes I have instructions how to deploy to heroku here: http://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/ . It would be similar for your own server if you have node installed.
Neven
@Darko I'm not sure what you mean. You don't have to use Heroku, you can use your own server. Set it up on your own local machine first. See my previous questions.
Neven
@This starter uses a backend DB to create users for people who want this feature. What I think you are asking for is just the social login without creating any users on your own server. Is that what you are trying to do? Does your app not require your own Backend with Database? If so, I will have to create a new starter for simply using social login without create users feature.
Darko Pavić
Yes, I have bought this plugin because I thought so. I have backend server in "go" which has db with users but on very start I want to do ouath login and after that is done save localy for example facebook username and on second view make new request to my server via socket which will send fb username in first request.
ELy
Hi, this is great thank you. I have a couple of issues. 1. The sign up process seems to populate the username in the email and username columns? 2. After user logs out, there is a <home home menu item which takes the user back in to their account which seems as if the logout process dosent work. 3. The create account button appears to be disabled until details have been added in to the login form which isn't very intuitive. I was wondering if a separate sign up page can be made?
Darko Pavić
I have tried your basic plugin which is without backend and everything is working as expected.
Neven
@Ely 1. The sign up process currently uses the entered email as both email and username to create the user. You can see how it works in the routes/signUp.js in the Server. 2. I forgot to hide the back button, I will add the new code to fix it. 3. Currently the app follows a simplistic approach of creating users, a new page can be added similar to templates/login.html that is just for user creation once you learn how the system is setup. In Server/App.js you can see how the Users are defined in the DB, you can make changes there using Sequelize and then expand the app to what you want it to do. I would recommend reading quick tutorials on Angular, Node, Express and Sequelize to get familiar how to best expand this template. I will try to better explain how to modify this as well.
Neven
@Ely I added (hide-back-button="true" can-swipe-back="false") to the login.html. You shouldn't see any back buttons after logout.
Miguel Clement
works great, I have one question. I registered with facebook to get my own app id and the app says I need to add the URL of the application to the facebook app settings. What URL should I add to the facebook settings?
Neven
Added auto login and checking session.
Neven
The Change is in Server routes/socialLogin.js and in Frontend controllers.js, app.js and templates/splash.html
GG
Is this compatibel with the latest version of ionic (1.3.1)?
GG
I havn't tried it yet, I didn't want to buy it without knowing if it would work with the latest version. Could you check and see?
Neven
Nothing drastic has changed in ionic versions so it should work. I offer full refunds to customers who can't get their projects working for whatever reason.
CK
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?
Appt, LLC
Hello @Neven, I had downloaded the package. How do I connect the front-end UI to the server-side NodeJS app. I had it deployed into Google App Engine. However, when I use "ionic emulate ios" and click "Login" or "create account", it shows me "service unavailable". Please help.
Neven
ok you are having cross origin issues because you're probably running ui and backend on two different ports. Check http://rubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/ for solution how to deploy as single app. Look at the bottom of the post.
Shailender Ahuja
Hi, i need my money back.. its useless there were no demo, you have written last year updated, and IONIC 3 launched in 2016 but the code was totally based on iONIC1 either provide me IONIC3 based INSTRAGRAM login product. Or give my money back :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :(
Shailender Ahuja
Hi, i need my money back.. its useless there were no demo, you have written last year updated, and IONIC 3 launched in 2016 but the code was totally based on iONIC1 either provide me IONIC3 based INSTRAGRAM login product. Or give my money back :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :( :(
Appt, LLC
Hello @Neven, I had downloaded the package. How do I connect the front-end UI to the server-side NodeJS app. I had it deployed into Google App Engine. However, when I use "ionic emulate ios" and click "Login" or "create account", it shows me "service unavailable". Please help.
Neven
ok you are having cross origin issues because you're probably running ui and backend on two different ports. Check http://rubberchickin.com/origin-is-not-allowed-by-access-control-allow-origin-ionic/ for solution how to deploy as single app. Look at the bottom of the post.
CK
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?
GG
Is this compatibel with the latest version of ionic (1.3.1)?
GG
I havn't tried it yet, I didn't want to buy it without knowing if it would work with the latest version. Could you check and see?
Neven
Nothing drastic has changed in ionic versions so it should work. I offer full refunds to customers who can't get their projects working for whatever reason.
Neven
Added auto login and checking session.
Neven
The Change is in Server routes/socialLogin.js and in Frontend controllers.js, app.js and templates/splash.html
Miguel Clement
works great, I have one question. I registered with facebook to get my own app id and the app says I need to add the URL of the application to the facebook app settings. What URL should I add to the facebook settings?
Neven
@Ely I added (hide-back-button="true" can-swipe-back="false") to the login.html. You shouldn't see any back buttons after logout.
Neven
@Ely 1. The sign up process currently uses the entered email as both email and username to create the user. You can see how it works in the routes/signUp.js in the Server. 2. I forgot to hide the back button, I will add the new code to fix it. 3. Currently the app follows a simplistic approach of creating users, a new page can be added similar to templates/login.html that is just for user creation once you learn how the system is setup. In Server/App.js you can see how the Users are defined in the DB, you can make changes there using Sequelize and then expand the app to what you want it to do. I would recommend reading quick tutorials on Angular, Node, Express and Sequelize to get familiar how to best expand this template. I will try to better explain how to modify this as well.
Darko Pavić
I have tried your basic plugin which is without backend and everything is working as expected.
ELy
Hi, this is great thank you. I have a couple of issues. 1. The sign up process seems to populate the username in the email and username columns? 2. After user logs out, there is a <home home menu item which takes the user back in to their account which seems as if the logout process dosent work. 3. The create account button appears to be disabled until details have been added in to the login form which isn't very intuitive. I was wondering if a separate sign up page can be made?
Darko Pavić
Yes, I have bought this plugin because I thought so. I have backend server in "go" which has db with users but on very start I want to do ouath login and after that is done save localy for example facebook username and on second view make new request to my server via socket which will send fb username in first request.
Neven
@This starter uses a backend DB to create users for people who want this feature. What I think you are asking for is just the social login without creating any users on your own server. Is that what you are trying to do? Does your app not require your own Backend with Database? If so, I will have to create a new starter for simply using social login without create users feature.
Neven
@Darko I'm not sure what you mean. You don't have to use Heroku, you can use your own server. Set it up on your own local machine first. See my previous questions.
Neven
Looks like the installation might have an issue. run these 2 commands in the frontend folder. 1. cordova plugin rm org.apache.cordova.inappbrowser 2. cordova plugin add cordova-plugin-inappbrowser
Neven
And yes I have instructions how to deploy to heroku here: http://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/ . It would be similar for your own server if you have node installed.
Neven
And can you confirm you have mysql running and you have updated app.js with your mysql information?
Darko Pavić
@Neven - I have replaced localhost with my local computer IP. Should I put code from "Server" folder on my public server? If yes is there any step by step how to setup & configure?
Neven
@Darko Yes, if you read my Common Issues section in the Description you will see that services will only work when you run as apps on iOS and Android and not with `ionic serve`. For running `ionic emulate ios` did you replace all the localhost references with the IP of your server?
Darko Pavić
I am getting same error no matter trying Live Layout in App Preview or "ionic emulate ios" Error ss: https://www.dropbox.com/s/44g3l48oca3v6t3/Screenshot%202016-05-03%2020.16.57.png?dl=0 Second error is when I run ionic serve and I try over browser, I am getting in chrome console "Facebook Login Error: Cannot authenticate via a web browser" Please help
Neven
I have added a tutorial on how to deploy node apps to heroku, which is a popular way to deploy node.js projects. http://rubberchickin.com/how-to-deploy-your-ionic-node-js-app-to-heroku/
Neven
And If you don't want to use Heroku then you will have to follow instroctions how to install node.js on your own server, the installation will be different depending on your Server OS or linux distro. Herei s one example for Ubuntu: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04
Neven
@Oscar you can still have the database on your own server and have the app deployed on Heroku.
Oscar Eduardo Acosta
this alternative seems interesting, but I feel more comfortable having the database on my own server, you could help me with a tutorial of the first option, please.
Neven
I will upload a tutorial shortly on how to deploy to Heroku which is the most recommended way to deploy node apps.
Neven
I'm not exactly sure what you mean by that, but you have to modify all the localhost:3000 references to use your website url or ip address and port number.
Oscar Eduardo Acosta
One question, I have a server where already climbed the "Server" folder, you must modify the "Fronted" folder to my server you connect?
Oscar Eduardo Acosta
Woouu is very complicated, I thought this would be easier process, I will try, thanks for the reply.
Neven
@Oscar There are a 2 ways to do this. First one is to install node on your webserver and host the whole thing. You will have to install node.js on your own server and install the Server Folder part of my app on there. This can be quite complicated if you are not familiar with the process. And unless you own the server hardware some service providers don't let you install node. A Second and easier way is to use Heroku.com. Heroku has a free option and does not host DB directly. Once you have the Server portion working on your local machine you can then deploy that folder via dropbox to your heroku. You should be able to use your db from your own website to make it work. Heroku can host the server part and your website can host the DB. Heroku also offers JawsDB which can be used as well instead of your own website DB. The Frontend folder should not be hosted anywhere, it is used on your local machine to make a build. Remember this will only work if you are running the app on a smartphone and not via a browser. I know it's a complicated process, but Hope this helps.
Oscar Eduardo Acosta
For example, my application must store user data in the database of my personal web www.oskr.com.co ie, I created a database called oskr_user, with its own user name and password, these data have placed in app.js that is in the "Server" folder, these files I have uploaded to my website, in the "Fronted" folder have edited the uRL service.js that say "localhost" by management server and its port, however, the application says that the server is not available, please help, my email is adnartcolombia@gmail.com
Oscar Eduardo Acosta
Good morning, I have a big doubt, I bought this plugin, and indeed what I can use from my computer, ie locally, but I can not run the application, I have a website with myslq, when I think the apk with this plugin always he says that the server is not available, I changed fields localhost service.js by the server address but still does not work, what should I do?
Hey there! You'll need to log in before you can leave a rating here.
Oscar Eduardo Acosta
The plugin is quite promising, I would recommend better explain how to integrate a mysql server, ie integrate a personal website with mysql, phpmyadmin administered, as local parameters are different.
Darko Pavić
great plugin
Miguel Clement
works as expected
{{ rating.comment }}
{{ rating.comment }}
Miguel Clement
works as expected
Darko Pavić
great plugin
Oscar Eduardo Acosta
The plugin is quite promising, I would recommend better explain how to integrate a mysql server, ie integrate a personal website with mysql, phpmyadmin administered, as local parameters are different.