Ionic Social Sign-On OAuth - SideMenu App
Super awesome Ionic Starter for any kind of App!
- iOS, Android
- 5 years ago
- 1 year ago
**GOOGLE PLUS LOGIN IS NO LONGER SUPPORTED
Ionic Single Sign-On SideMenu App
If you want the Social Login Features without the backend then check out Ionic Social Sign-On Basic
If you just want to create users for your app then check out: Ionic Session Login.
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.
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.
Check out my other useful starters are here: Great Ionic Starters.
- SideMenu Navigation
- Dark Midnight Theme (css customizable)
- Create Users
- Auto login if session is valid
- 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"
- 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
- Go to the Server folder
- Install node.js Node.js Installation
- Install NPM
- 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
Usage via http post
- 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-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)
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/)
- 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 the
localhostreferences with your computer external ip such as
192.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 run -lyou will encounter Cross Origin Issues (CORS). You can read about it here.
- 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.
- 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.