DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Using the New Auth Component for Angular 2 With DreamFactory

Using the New Auth Component for Angular 2 With DreamFactory

Angular 2's new auth component makes auth easier to implement. Check out how it works and how it integrates with DreamFactory.

Andy Rai user avatar by
Andy Rai
·
Jun. 25, 16 · Tutorial
Like (1)
Save
Tweet
Share
4.30K Views

Join the DZone community and get the full member experience.

Join For Free

angular-1.png

i’ve been working on dreamfactory's angular sdk, sample app, and documentation. it's now available on github with some good examples and details. there are some important things to consider when using dreamfactory authentication with a custom angular 2 component.

background

angular2-auth-component handles login, register, and logged in user profile management. this component can be installed in any angular 2 project using npm, and, with some additional lines of code, you can have a running dreamfactory auth system in your dreamfactory app. typescript has been chosen to write angular2-auth-component. this should not affect any project written in es6. angular2-auth-component can still be included and used in any other project.

to get started with angular 2, check out the getting started guide from angular.io. it has simple and useful examples for organizing code and creating components in angular 2.

using the component

in order to communicate with dreamfactory console, you need to embed the following configuration values in your index.html in a script tag.

window.instanceurl = '';
window.appkey = ''

these config values will be used by angular2-auth-component to communicate with dreamfactory console. then a simple npm install should download the module inside your node_modules folder after which you can include and use all the components inside angular2-auth-component.

npm install angular2-auth-component --save

services and components available for use:

logincmp - dreamfactory login widget
registercmp - dreamfactory register widget
profilecmp - dreamfactory logged in user profile widget
profileservice - http service with methods to get and set profile
basehttpservice - a wrapper around angular 2 http service. this service should be used by the application to make any api call.

let's say for example you want to use login component. first thing to do is to import the login component and necessary services. let's call your root component appcmp.

import {logincmp, basehttpservice} from 'angular2-auth-component/index';

then, in your main component, inject services and use the component on `/login` route.

@component({
  selector: 'app',
  templateurl: './components/app/app.html',
  styleurls: ['./components/app/app.css'],
  encapsulation: viewencapsulation.none,
  directives: [router_directives],
  providers: [basehttpservice]
})

@routeconfig([
  { path: '/login', component: logincmp, as: 'login' },
])

alternatively, you can also have your own login route and use the widget in your html.

 <df-login></df-login>

make sure you mention logincmp in directives list like this:

@component({
  selector: 'app',
  templateurl: './components/app/app.html',
  styleurls: ['./components/app/app.css'],
  encapsulation: viewencapsulation.none,
  directives: [router_directives, logincmp],
  providers: [basehttpservice]
})

in a similar way, you can also use registercmp, profilecmp, etc.

there is a separate service called profileservice which handles all the http operations for currently logged in user profiles with the following methods:

get: get profile. returns object of profile class.
save: save profile. requires object of profile class.
resetpassword: reset password.

you can either have you own profile widget and use profileservice methods or you can use profilecmp either in a route or html widget as shown in above `logincmp` example.

there is also a sample repository which uses these components using npm install.

AngularJS

Published at DZone with permission of Andy Rai, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • What Are You Missing by Debugging in VS Code?
  • Streamlining Your Workflow With the Jenkins HTTP Request Plugin: A Guide to Replacing CURL in Scripts
  • 5 Factors When Selecting a Database
  • Automated Performance Testing With ArgoCD and Iter8

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: