移动应用程序中最常见的一种模式是双电子邮件 Facebook 登录系统。 Facebook 是一种非常流行的登录方法,但并非每个人都有帐户,也不是每个人都想使用 Facebook 帐户登录新服务。这使得为用户提供使用电子邮件或 Facebook 帐户进行注册的选项非常有吸引力。
关于如何设置一个帐户的信息似乎很少(至少我能找到)。 Sencha Touch 中的登录/身份验证系统。因此,我正在撰写一系列博客文章,其中将介绍如何从头开始设置登录系统,并可选择使用电子邮件或 Facebook 帐户进行注册。该应用程序将具有 PHP 和 MySQL 后端,并且还将使用 PhoneGap Build。
未来几周涵盖的主题将包括:
在第一部分中,我将引导您设置数据库并在服务器上设置一些 PHP 文件,以准备接收来自应用程序的调用。
当然,我们必须首先创建一个 MySQL 数据库,所以请继续执行此操作,将其命名为您想要的任何名称。创建数据库后,将下表添加到其中:
CREATE TABLE `users` (`id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,`fbid` VARCHAR(255),`email` VARCHAR(100) NOT NULL,`password` VARCHAR(255) NOT NULL,`session` VARCHAR(255),PRIMARY KEY (`id`));
这将使我们能够存储用户用于注册的详细信息,以及我们想要跟踪的任何其他详细信息。如果您愿意,您可以继续添加一些其他字段,例如“名字”、“电话”等。如果您正在构建一个真正的应用程序,您可能还需要其他表,但这就是我们实际让登录系统正常工作所需的全部内容。
在整个登录和注册过程中,我们的应用程序将调用托管在互联网上的 API。该 API 将使用 PHP 文件创建,该文件将与我们的数据库交互,然后以 JSON 格式将数据返回到我们的应用程序。
虽然我们还没有实现它,但我们的应用程序将调用我们的服务器使用 Ajax 代理。这样做的问题是,我们可能会遇到一些跨源资源共享错误,可能类似于以下内容:
XMLHttpRequest 无法加载 [URL]。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问源“http://localhost”。
XMLHttpRequest 无法加载 [URL]。 Access-Control-Allow-Origin 不允许 Origin [URL]。
Access-Control-Allow-Headers 不允许请求标头字段 Content-Type
本质上,我们是遇到安全问题,因为我们向与托管应用程序的域不同的域发出请求。我最近写了一篇关于此的博客文章,所以如果您想了解更多信息,可以在这里查看。
我们现在要做的是确保我们不会遇到任何这些错误确保我们从一开始就正确设置标题(以及其他所有内容)。现在我需要您创建一个名为“users.php”的文件,并向其中添加以下代码:
<?php$link = mysql_connect("localhost", "db_user", "your_password");mysql_select_db("your_db", $link);$action = $_GET["action"];$result = "{'success':false}";header('Access-Control-Allow-Origin: *');header('Access-Control-Allow-Methods: GET, POST, OPTIONS');header('Access-Control-Allow-Headers: Content-Type,x-prototype-version,x-requested-with');echo($result);?>
我们在这里所做的是首先连接到数据库 - 您必须替换这些详细信息与你自己的。接下来,我们将获取将通过 URL 传递到 API 的“操作”。例如:http://www.example.com/api/users.php?action=something。最终我们将循环这个“action”变量来执行适当的操作。当我们想要登录用户时,我们可以向 'users.php?action=login' 发出 Ajax 请求,或者如果我们想要注销用户,可以发送 'users.php?action=logout' 等等。
在输出结果之前,我们还在这里设置标题。这些标头对于覆盖默认的跨源资源共享选项并防止上述错误是必需的。如果您阅读了我上面链接的 CORS 文章,您会注意到您还可以在服务器级别设置这些标头,而不是直接在 PHP 文件中设置。
在此文件的末尾,我们输出“$result” 。如果您在浏览器中访问此页面,您只会看到“{‘success’:false}”。这是一个 JSON 格式的字符串,告诉我们刚刚在服务器上执行的任何操作均未成功。在本教程系列的后续部分中,我们当然将通过此 JSON 字符串输出不同的数据,这些数据将指示用户是否成功登录、其会话密钥是什么等等。这种相同的格式可用于发送大型、复杂的数据,包括我们在数据库中存储的有关用户的所有详细信息。
本教程系列的第一部分到此结束。此时,我们已经设置了数据库,并且准备好添加 API 并与之交互。请继续关注本系列的以下帖子;当第二部分准备就绪时,我将在此处更新第二部分的链接!请随时订阅右侧栏中的每两周一次的新闻通讯,以获取任何新博客文章的更新。