The Silhouette Angular Seed project is an Activator template which shows how Silhouette can be used to create a SPA with AngularJS and Play.
JavaScript Scala ApacheConf Shell HTML CSS Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
app
conf
project
public/images
scripts
ui
.buildpacks
.gitignore
CONTRIBUTING.md
Gemfile
Gemfile.lock
LICENSE
Procfile
README.md
activator.properties
app.json
build.sbt
package.json

README.md

This template is not maintained anymore. If you search for a way to combine a single page application with Play and Silhouette, then please have a look at the Silhouette Play React Seed Template.

Play Silhouette Angular Seed Project

The Play Silhouette Angular Seed project shows how Silhouette can be used to create a SPA with AngularJS/Satellizer and Play scaffolded by yeoman. It's a starting point which can be extended to fit your needs.

Example

Deploy to Heroku

(The "Build App" phase will take a few minutes)

Or you can find a running example of this template under the following URL: https://play-silhouette-angular-seed.herokuapp.com/

Features

  • Sign Up
  • Sign In (Credentials)
  • JWT authentication
  • Social Auth (Facebook, Google+, VK, Twitter, Xing)
  • Dependency Injection with Guice
  • Publishing Events
  • Avatar service
  • Remember me functionality
  • Security headers
  • CSRF Protection

Documentation

Consulate the Silhouette documentation for more information. If you need help with the integration of Silhouette into your project, don't hesitate and ask questions in our mailing list or on Stack Overflow.

Getting started

  1. Make sure u have Ruby and node.js installed.

Then you must install the node packages yo, grunt and bower:

npm install -g yo grunt grunt-cli bower

And the ruby packages sass and compass:

gem install sass compass

Alternative you can use Bundler to install the ruby packages:

bundle install -j4 --path .bundle
  1. Configure social providers

To configure the social providers for Satellizer, Open the file "~\ui\app\scripts\app.js" and input your providers clientId:

// Facebook
$authProvider.facebook({
  clientId: 'your-client-id',
  ...
});

// Google
$authProvider.google({
  clientId: 'your-client-id',
  ...
});
...

If you are using Heroku Update the "~\app.json" file with your client secret and client ID.

"env": {
  "BUILDPACK_URL": "https://github.com/heroku/heroku-buildpack-multi",
  "NPM_CONFIG_PRODUCTION": "false",
  "PLAY_CONF_FILE": "application.conf",
  "PLAY_APP_SECRET": "changeme",
  "FACEBOOK_CLIENT_ID": "",
  "FACEBOOK_CLIENT_SECRET": "",
  "GOOGLE_CLIENT_ID": "",
  "GOOGLE_CLIENT_SECRET": "",
  "TWITTER_CONSUMER_KEY": "",
  "TWITTER_CONSUMER_SECRET": ""
}

To test social providers on localhost, you can either set your system environment variables as defined in the app.json "env" section or manually update the "~\conf\silhouette.conf" file directly with your client ID and client secret.

# Google provider
google.accessTokenURL="https://accounts.google.com/o/oauth2/token"
google.redirectURL="http://localhost:9000"
google.clientID="your-client-id"
google.clientSecret="your-client-secret"
google.scope="profile email"
  1. Start sbt and run the following:
$ update

$ npm install

$ bower install

$ grunt build

$ run

Activator

See https://typesafe.com/activator/template/play-silhouette-angular-seed

License

The code is licensed under Apache License v2.0.