AngularJs + PHP身份验证

本文介绍了AngularJs + PHP身份验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我开始学习AngularJs，现在我正尝试使用angular和php来完成我的登录模块，但是我遇到了一些问题.我看过很多教程，但是对我的情况没有一个帮助，所以这里是我所拥有的:controllers.js:

Hi i started learning AngularJs and now im trying to do my Login module using angular and php, but i have some issues. I have watched alot tutorials but none of them was helpful in my case, so here is what i have: controllers.js:

var controllers = angular.module('controllers', []); controllers.controller('loginController', ['$scope', '$http', 'UserService', function(scope, $http, User) { scope.main = [ {username: '', password: ''} ] scope.login = function(){ var config = { url: '../auth/login.php', method: 'POST', data: { username: scope.main.username, password: scope.main.password }, headers: {'Content-Type': 'application/x-www-form-urlencoded'} } $http(config) .success(function(data,status,headers,config){ if(data.status){ //succefull login User.isLogged = true; User.username = data.username; } else{ User.isLogged = false; User.username = ''; } }) .error(function(data,status,headers,config){ User.isLogged = false; User.username = ''; }); } }])

auth.js:

var services = angular.module('services', []); services.factory('UserService', [function(){ var sdo = { isLogged: false, username: '' }; return sdo; }]);

login.php:

login.php:

$username = $_POST['username']; if($username){ return "Logged"; }else{ return false; }

和html:

<div class="col-xs-12" id="loginCol" ng-controller="loginController"> <form ng-submit='login()' name="form" novalidate> <div class="form-group"> <label for="username" class="sr-only">Username</label> <input type="text" ng-model="scope.main.username" class="form-control" id="username" placeholder="Име..." /> <label for="password" class="sr-only">Password</label> <input type="password" ng-model="scope.main.password" class="form-control" id="password" placeholder="Парола..." /> </div> <div class="form-group pull-right"> <button type="button" class="btn btn-primary">Login</button> <button type="button" class="btn btn-default">Register</button> </div> </form> </div>

在这种情况下，我只希望用户在用户名输入中键入一些内容，然后单击登录按钮，并成功调用login.php以返回一些消息.问题是这样写的代码出现错误"loginController不是函数，未定义"如何解决?

In this case i want just if user type something in the username input and hit the login button and on successful call of login.php to return some message. The problem is that code written like that got error "'loginController' is not a function, got undefined" how to fix it?

推荐答案

(披露:我是UserApp的开发人员之一)

您可以尝试使用第三方服务 UserApp ，以及 AngularJS模块.

You could try the third-party service UserApp, together with the AngularJS module.

查看入门指南，或采用有关Codecademy的课程.这是一些工作原理的示例:

Check out the getting started guide, or take the course on Codecademy. Here's some examples of how it works:

• 具有错误处理的登录表单:

<form ua-login ua-error="error-msg"> <input name="login" placeholder="Username"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Log in</button> <p id="error-msg"></p> </form>

具有错误处理的注册表单:

<form ua-signup ua-error="error-msg"> <input name="first_name" placeholder="Your name"><br> <input name="login" ua-is-email placeholder="Email"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Create account</button> <p id="error-msg"></p> </form>

ua-is-email表示用户名与电子邮件相同.

ua-is-email means that the username is the same as the email.

如何指定应该公开的路由以及作为登录表单的路由:

$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});

.otherwise()路由应设置为您希望用户在登录后被重定向到的位置.示例:

The .otherwise() route should be set to where you want your users to be redirected after login. Example:

$routeProvider.otherwise({redirectTo: '/home'});

退出链接:

<a href="#" ua-logout>Log Out</a>

访问用户属性:

使用user服务访问用户信息，例如:user.current.email

User info is accessed using the user service, e.g: user.current.email

或在模板中:<span>{{ user.email }}</span>

隐藏仅在登录时可见的元素:

<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

根据权限显示元素:

<div ua-has-permission="admin">You are an admin</div>

要对您的后端服务进行身份验证，只需使用user.token()获取会话令牌并将其与AJAX请求一起发送.在后端，将 UserApp API 与 PHP库来检查令牌是否有效.

And to authenticate to your back-end services, just use user.token() to get the session token and send it with the AJAX request. At the back-end, use the UserApp API with the PHP library to check if the token is valid or not.

如果您需要任何帮助，请告诉我:)

If you need any help, just let me know :)