Appcelerator：移动应用程序中的身份验证

Preface: This article is part of a series focused on cross platform mobile app development (specifically Android and iOS) using the Alloy framework and Titanium Studio made by Appcelerator. This article presumes a working knowledge of Titanium Studio and the Alloy framework.

前言 ：本文是使用Appcelerator制造的Alloy框架和Titanium Studio进行的跨平台移动应用程序开发（特别是Android和iOS）系列文章的一部分。 本文假定您对Titanium Studio和Alloy框架有一定的了解。

If you are creating a mobile app that requires authentication before performing any actions you may need to present the user with a login form. You also likely want to save the user's information so that after authenticating they don't need to see the login form the next time the app is started.

如果您要创建需要进行身份验证的移动应用程序，然后再执行任何操作，则可能需要向用户提供登录表单。 您还可能希望保存用户的信息，以便在进行身份验证之后，他们无需在下次启动应用程序时看到登录表单。

In the Alloy framework, the first window that is normally started is the "index.xml" window via the "$.index.open()" call in the "index.js" controller file. To handle opening either the login form ("LoginForm") or the home screen ("Home") of your app based on authentication you can do the following:

在Alloy框架中，通常通过“ index.js”控制器文件中的“ $ .index.open（）”调用启动的第一个窗口是“ index.xml”窗口。 要处理基于身份验证打开应用程序的登录表单（“ LoginForm”）或主屏幕（“ Home”），您可以执行以下操作：

File: /app/controllers/index.js

文件：/app/controllers/index.js

var auth = require('auth');

if (auth.isAuthenticated()) {
   Alloy.createController("Home").getView().open();
} else {
   Alloy.createController("LoginForm").getView().open();
}

The "LoginForm" view/controller will be responsible for accepting the user's input and validating the credentials. A simple form may look like this:

“ LoginForm”视图/控制器将负责接受用户的输入并验证凭据。 一个简单的形式可能如下所示：

file: /app/views/LoginForm.xml

文件：/app/views/LoginForm.xml

<Alloy>
   <Window id="loginForm" layout="vertical">
      <TextField id="loginName" hintText="Username"/>
      <TextField id="password" hintText="Password" passwordMask="true"/>
      <Button id="loginSubmit">Login!</Button>
   </Window>
</Alloy>

The corresponding controller would accept the user's input and perform the validation function. If the user's credentials are correct, the "Home" page is opened:

相应的控制器将接受用户的输入并执行验证功能。 如果用户的凭据正确，则将打开“主页”页面：

file: /app/controllers/LoginForm.js

文件：/ app / controllers / LoginForm .js

var args = arguments[0] || {};

$.loginSubmit.addEventListener('click', function(e) {
   var auth = require('auth');

   if (auth.validateCredentials($.loginName.value, $.password.value)) {
      Alloy.createController("Home").getView().open();
   } else {
      alert("Invalid credentials!");
   }
});

For this exercise, the "Home" screen of the app will just have a welcome message and a button to log out the user. Example view and controllers:

对于本练习，该应用程序的“主页”屏幕将仅显示欢迎消息和一个用于注销用户的按钮。 示例视图和控制器：

file: /app/views/Home.xml:

文件：/app/views/Home.xml：

<Alloy>
   <Window id="home" layout="vertical">
      <Label>Welcome, you have been authenticated!</Label>
      <Button id="logoutButton">Logout</Button>
   </Window>
</Alloy>

var args = arguments[0] || {};

$.logoutButton.addEventListener('click', function(e) {
   var auth = require('auth');
   auth.logout();
});

For the app to remember is a user has previously authenticated (for the check in index.js) we can store some information using the Titanium.App.Properties interface. Warning: The properties are not encrypted, so storing plain text passwords is not recommended. Instead consider saving an encrypted authentication token. The 'auth' library will handle this and the functions used by the other controllers.

要记住该应用程序是用户先前已通过身份验证（用于index.js中的检查），我们可以使用Titanium.App.Properties接口存储一些信息。 警告：属性未加密 ，因此不建议存储纯文本密码。 而是考虑保存加密的身份验证令牌。 “ auth”库将处理此问题以及其他控制器使用的功能。

file: /app/lib/auth.js

文件：/app/lib/auth.js

// Authentication library

// Custom logic to validate auth token may be required.
// In this example we are just checking to see if it exists.
exports.isAuthenticated = function() { 
   var authToken = Ti.App.Properties.getString("authToken");
   return (authToken != undefined);
};

// Custom logic to validate the credentials will be required
// In this example we just test for a basic password
exports.validateCredentials = function(loginName, password) {
   var isValid = (loginName == 'user1' && password == '1234');
   
   if (isValid) {
      // Save the auth token
      Ti.App.Properties.setString("authToken", "encryptedAuthTokenString");
   }
   
   return isValid;
};

// To logout the user, remove the property and return them to the LoginForm
exports.logout = function() {
   Ti.App.Properties.removeProperty("authToken");
   Alloy.createController("LoginForm").getView().open();   
};

By using these steps you will be able to do basic authentication and remembering a user for your app. All of the implementations are not device specific and will work for both iPhone and Android platforms.

通过使用这些步骤，您将能够进行基本身份验证并记住您应用程序的用户。 所有实现都不是特定于设备的，并且可以在iPhone和Android平台上使用。

---

---

Android gotcha: The Android platform has the very useful, but sometimes tricky, addition of the "Back" button that is always present. Consider the following scenario:

Android陷阱： Android平台增加了非常有用的功能，但有时很棘手，它始终会显示“返回”按钮。 请考虑以下情形：

1. New user launches app, is presented with the LoginForm.
   新用户启动应用程序，并带有LoginForm。
2. User enters credentials and proceeds to the Home screen.
   用户输入凭据并进入主屏幕。
3. At the Home screen, clicks the "Back" button.
   在主屏幕上，单击“上一步”按钮。
4. The user will be sent back to the LoginForm even though they already authenticated.
   即使用户已经通过身份验证，也将被发送回LoginForm。

1. Authenticated user clicks the "Logout" button on Home screen and sent the LoginForm.
   经过身份验证的用户单击主屏幕上的“注销”按钮，并发送了LoginForm。
2. On the LoginForm, the user clicks the "Back" button.
   用户在LoginForm上单击“上一步”按钮。
3. The user will be sent back to the Home screen even though they are no longer authenticated.
   即使不再进行身份验证，该用户也将被发送回主屏幕。

snippet from file: /app/views/Home.xml

文件的摘录：/app/views/Home.xml

   <Window id="home" layout="vertical" exitOnClose="true">

Snippet from file: /app/views/LoginForm.xml

文件的摘录：/app/views/LoginForm.xml

   <Window id="loginForm" layout="vertical" exitOnClose="true">

翻译自: https://www.experts-exchange.com/articles/17376/Appcelerator-Authentication-in-a-mobile-app.html